Skip to content

xmasuhai/echarts-demo-1

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package.json
package.json
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

echarts-demo-1

[toc]

统计图表

【数据可视化】Echarts 使用指南

分别介绍

  • JS里使用 echarts
  • Vue里使用 echarts
  • React里使用 echarts

echarts 图表绘制思路

  1. 获取一个有宽高的 DOM 元素
  2. 初始化echarts实例(echarts.init)
  3. 指定图表的配置项和数据(option)
  4. 使用刚指定的配置项和数据显示图表(setOption(option))

引入 echarts

无打包工具（webpack/parcel）用于快速调试demo
  • 直接在 index.html引入<script src="[path]/echarts.min.js"></script>，使用bootCDN
  • 使用全局变量window.echarts

src/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts-demo-1</title>
</head>

<body>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
<script>
// 查看控制台是否正确引入
  console.log(echarts)
</script>
</body>
</html>
  • 安装http-server
yarn global add http-server
  • 使用http-server打开src/index.html
hs src/ -c-1
有webpack/parcel(vue/cli vite) + TS 用于一般项目

安装（以使用parcel为例）

yarn global add parcel-bundler
# yarn init -y # enter all the time # 无需此步骤 第一次安装包 自动初始化项目
yarn add echarts
yarn add --dev @types/echarts
  • 安装yarn global add parcel-bundler而 不是yarn global add parcel
  • 安装yarn add --dev @types/echarts是为了在WebStorm中输入代码会有提示
  • 遇坑，不显示属性名提示（灰色表示）
    • 保证安装包安装在项目目录下的node_modules，而不是安装在~/根目录
    • 去掉 设置 > 终端 > “将'node_modules/.bin'从项目根添加到%PATH%” 前面的勾选
    • 重新初始化一遍项目

index.html中引入入口文件main.js

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts-demo-1</title>
</head>

<body>
<script src="main.js"></script>
</body>
</html>

main.js

console.log('hi')
  • import * as echarts from 'echarts';'全局导入
  • 或者按需导入模块：
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import {
    BarChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';

echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
);

main.js

// import echarts from 'echarts' // 旧版本@5.00- 导入语句
import * as echarts from 'echarts'; // echarts@5.1.2
console.log(echarts)

使用parcel运行

parcel src/index.html
  • 编译完成后，查看效果点击Server running at http://localhost:1234

CRM学习法

  • Copy 去官网炒栗子
  • Run 在自己的项目里运行
  • Modify 修改代码，理解作用（半黑箱）

echarts 第一个例子

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts-demo-1</title>
</head>

<body>
<main>
  <section>
    <div id="barChart" style="width: 600px; height:400px;"></div>
  </section>
  <br>
</main>
<script src="main.js"></script>
</body>

</html>
  • 在绘图前需要为 ECharts 准备一个具备高宽的 DOM 容器

main.js

import barChart from './modules/barChart.js'
barChart()

./modules/barChart.js

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import {
  BarChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
);

export default function () {
  // 初始化加载DOM
  const chartDom = document.getElementById('barChart')
  const myChart = echarts.init(chartDom, 'dark')
// 配置选项
  const option = {
    title: {
      text: 'ECharts 柱状图示例'
    },
    tooltip: {},
    legend: {
      data: ['bug数']
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    series: [{
      name: 'bug数',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  }
// 使用配置项和数据显示图表
  option && myChart.setOption(option)
}
  • legend.data与series.name的名称必须相互对应 ，一致时才能显示项目名称

增加一个线形图

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts-demo-1</title>
</head>

<body>
<main>
  <section>
    <div id="barChart" style="width: 600px; height:400px;"></div>
  </section>
  <br>
  <section>
    <div id="lineChart" style="width: 600px; height:400px;"></div>
  </section>
</main>
<script src="main.js"></script>
</body>

</html>

main.js

import barChart from './modules/barChart'
barChart()

import lineChart from './modules/lineChart'
lineChart()

./modules/lineChart.js

import * as echarts from 'echarts/core';
import {
  GridComponent
} from 'echarts/components';
import {
  LineChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use(
  [GridComponent, LineChart, CanvasRenderer]
);

export default function () {
  // 初始化加载DOM
  const chartDom = document.getElementById('lineChart')
  const myChart = echarts.init(chartDom, 'light')
// 配置选项
  const option = {
    title: {
      text: 'ECharts 线形图示例'
    },
    legend: {
      data: ['bug数']
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: 'bug数',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }]
  }
// 使用配置项和数据显示图表
  option && myChart.setOption(option)
}

echarts功能

换主题
  • ecahrts.init支持传第二个参数echarts.init(xxx, 'dark')
    • 主题默认default
    • 暗系主题dark
    • 亮系主题light
WebStorm/VSCode技巧
  • 安装@types/echarts加强代码提示
    • 遇坑，不显示属性名提示（灰色表示）
      • 保证安装包安装在项目目录下的node_modules，而不是安装在~/根目录
      • 去掉 设置 > 终端 > “将'node_modules/.bin'从项目根添加到%PATH%” 前面的勾选
      • 重新初始化一遍项目
  • WebStorm查看历史版本local history > show history，比较对应变更
细节配置

以重构lineCharts.js为例

import ...

export default function () {
  // 初始化加载DOM
  const chartDom = document.getElementById('barChart')
  if (!chartDom) {return}
  const myChart = echarts.init(chartDom, 'dark')

// 使用配置项和数据显示图表
  myChart.setOption({
    title: {
      text: 'ECharts 柱状图示例'
    },
    tooltip: {},
    legend: {
      data: ['bug数']
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    series: [{
      name: 'bug数',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
}
  • 直接将配置写在myChart.setOption里，由于安装了@types/echarts，写属性时会有代码提示
echarts 如何改外观 数据
import ...

export default function () {
  // 初始化加载DOM
  const chartDom = document.getElementById('lineChart');
  if (!chartDom) {return;}
  const myChart = echarts.init(chartDom, 'light');

// 使用配置项和数据显示图表
  myChart.setOption({
    title: {
      show: true,
      text: '销售数据',
      left: 20
    },
    legend: {
      data: ['金额']
    },
    tooltip: {
      show: true
    },
    xAxis: {
      axisLine: {
      },
      data: ['2021-06-01', '2021-06-02', '2021-06-03', '2021-06-04', '2021-06-05']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '金额',
      data: [150, 230, 224, 218, 135],
      type: 'line',
      lineStyle: {
        color: "#0074d9"
      },
      itemStyle: {
        borderWidth: 20,
        color: "#ff4136"
      }
    }]
  });
}

echarts 更新数据

目前只能显示静态的数据，需要更新数据，只需更新配置，再次 setOption即可

  • option只需更新需要改的部分配置属性
    • 但是坐标轴等数据需要包括原来的旧数据和新数据
  • echarts会自动找出差异，并更新图表
  • 更复杂的示例

封装模拟数据storage/chartData.js

let n = 0
let m = 0

export function createKey() {
  n += 1
  return `2021-6-${n}`
}

export function createValue() {
  m += 1
  return m
}

export default {
  dateList: [createKey(), createKey(), createKey(), createKey(), createKey()],
  valueList: [createValue(), createValue(), createValue(), createValue(), createValue()]
}

lineCharts.js

import ...

echarts.use(
  [GridComponent, LineChart, CanvasRenderer]
)

import chartData from '../storage/chartData'

// 初始化加载DOM
const chartDom = document.getElementById('lineChart')

if (!chartDom) {return}
export const myChart = echarts.init(chartDom, 'light')

export default function () {
// 使用配置项和数据显示图表
  myChart.setOption({
    title: {
      show: true,
      text: '销售数据',
      left: 20
    },
    legend: {
      data: ['金额']
    },
    tooltip: {
      show: true
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#0074d9'
        }
      },
      data: chartData.dateList
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '金额',
      data: chartData.valueList,
      type: 'line',
      lineStyle: {
        color: '#28a745'
      },
      itemStyle: {
        borderWidth: 20,
        color: '#ff4136'
      }
    }]
  })
}

loadMoreButton.js

import chartData, {createKey, createValue} from '../storage/chartData'

const loadMoreButton = document.getElementById('loadMore')

export default function (myChart) {
  loadMoreButton.addEventListener('click', () => {
    const key = createKey()
    const value = createValue()
    chartData.dateList = [...chartData.dateList, key]
    chartData.valueList = [...chartData.valueList, value]
    
    myChart.setOption({
      xAxis: {
        data: chartData.dateList
      },
      series: [{
        data: chartData.valueList
      }]
    })

  })
}

main.js

import barChart from './modules/barChart.js'
barChart()

import lineChart, {myChart} from './modules/lineChart.js'
lineChart()

import loadMoreButton from './modules/loadMoreButton'

loadMoreButton(myChart)

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts-demo-1</title>
</head>

<body>
<main>
  <section>
    <div id="lineChart" style="width: 600px; height:400px;"></div>
    <button id="loadMore">加载更多</button>
  </section>
</main>
<script src="main.js"></script>
</body>

</html>

echarts 展示 loading

  • 使用内置的loading动画：showLoading() / hideLoading() 显示/隐藏加载中动画
  • 事件锁控制触发事件的时机，防止频繁触发

loadMoreButton.js

import chartData, {createKey, createValue} from '../storage/chartData'

const loadMoreButton = document.getElementById('loadMore')

let isLoading = false
export default function (myChart) {
  loadMoreButton.addEventListener('click', () => {
    if(isLoading) {return}
    const key = createKey()
    const value = createValue()
    chartData.dateList = [...chartData.dateList, key]
    chartData.valueList = [...chartData.valueList, value]

    myChart.showLoading()
    isLoading = true
    setTimeout(() => {
      myChart.setOption({
        xAxis: {
          data: chartData.dateList
        },
        series: [{
          data: chartData.valueList
        }]
      })
      myChart.hideLoading()
      isLoading = false
    }, 1500)

  })
}

echart 点击事件

让用户可以和图表进行交互

在初始化后的 echarts 实例( const myChart = echarts.init(chartDom, 'light') )上使用 API on 即可

  • 只有图表中允许用户操作(比如点击)的部分才能设置用户交互
  • 获取dataIndex和seriesIndex
  • 其他查看文档：ECharts 中的事件和行为

clickChart.js

export default function (myChart) {
  myChart.on('click', (e) => {
    console.log("e.name: ", e.name)
    console.log("e.dataIndex: ",e.dataIndex)
    console.log("e.data: ", e.data)
    window.open(`https://www/baidu.com/?time=${e.name}`)
  })
}

main.js

import barChart from './modules/barChart.js'
barChart()

import lineChart, {myChart} from './modules/lineChart.js'
lineChart()

import loadMoreButton from './modules/loadMoreButton'

loadMoreButton(myChart)

import clickChart from './modules/clickChart.js'
clickChart(myChart)

echarts移动端适配

常规技巧
  • meta:viewport 抄淘宝手机版
  • 用JS获取屏幕宽度设置在div上
    • 设定宽高比
  • 使用echarts提供的媒体查询API

main.m.taobao.com

<meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

iPhoneX 的宽度 375px PC端设计稿是 1920*1080

  • 用代码获取屏幕宽度，来适配
const width = document.documentElement.clientWidth
echarts提供的媒体查询功能
  • baseOption + media
    • 将共有的选项放入 baseOption: {...}
    • 将独有的选项放入 media: [{query: {...}, option: {...}}, ...]

封装自动获取容器尺寸的方法 ./src/utils/fitScreen.js

// 当前视口宽度
const myScreenWidth = document.documentElement.clientWidth

export default function (chartDom) {
  if (!chartDom) {return}
  let coefficient = 1
  if(myScreenWidth > 500) {
    coefficient = .45
  }
  chartDom.style.width = `${myScreenWidth * coefficient}px`
  chartDom.style.height = `${myScreenWidth * coefficient * 1.2}px`
}

lineChart.js

import ...

echarts.use(
  [GridComponent, LineChart, CanvasRenderer]
)

import chartData from '../storage/chartData'
import fitScreen from './fitScreen.js'

// 初始化加载DOM
export const chartDom = document.getElementById('lineChart')

if (!chartDom) {return}
fitScreen(chartDom)

export const myChart = echarts.init(chartDom, 'light')

export default function () {
// 使用配置项和数据显示图表
  myChart.setOption({
    baseOption: {
      title: {
        show: true,
        text: '数据',
        left: 20
      },
      legend: {
        data: ['金额']
      },
      tooltip: {
        show: true
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            color: '#0074d9'
          }
        },
        data: chartData.dateList
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '金额',
        data: chartData.valueList,
        type: 'line',
        lineStyle: {
          color: '#28a745'
        },
        itemStyle: {
          borderWidth: 5,
          color: '#ff4136'
        }
      }]
    },
    media: [
      {
        query: {
          maxWidth: 500
        },
        option: {
          title: {
            show: true,
            text: '移动端数据',
            left: 20
          },
          series: [{
            itemStyle: {
              borderWidth: 25,
              color: '#ff4136'
            }
          }]
        }
      }
    ]
  })
}
字体

按比例缩放字体

  • 图表中的fontSize和legend的大小等默认都是px单位
    • legend中的itemWidth，itemHeight，itemGap
    • 柱状图中的barWidth，坐标系中的axisLine的width
    • 传入vw，rem单位是没有用
    • 定位方式传的单位可以是百分比，大小尺寸不能
  • 不只是字体的问题 各种图的比例也是
  • 将实际窗口的大小与设计图窗口大小做比得到要给相对的比率
  • 每个单位数值和这个比率相乘即可
// 当前视口宽度
const myScreenWidth = document.documentElement.clientWidth

// 换算方法
function nowSize(originalFontSizePX, initWidth = 1920) {
  return originalFontSizePX * (myScreenWidth / initWidth)
}

const barChartOption = {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
    axisPointer: {type: 'shadow'}
  },
  legend: {
    data: ['门禁进入', '门禁外出'],
    align: 'left',
    top: nowSize(18),
    right: nowSize(20),
    textStyle: {
      color: '#c1c5cd',
      fontSize: nowSize(13)
    },
    itemWidth: nowSize(10),
    itemHeight: nowSize(10),
    itemGap: nowSize(12)
  },
  grid: {top: '24%', left: '3%', right: '3%', bottom: '3%', containLabel: true},
  xAxis: [{
    type: 'category',
    data: ['1号楼', '2号楼', '3号楼', '4号楼', '5号楼', '6号楼', '7号楼', '8号楼',],
    axisLine: {show: true, lineStyle: {color: '#45647f', width: nowSize(1), type: 'solid'}},
    axisTick: {show: false,},
    axisLabel: {show: true, textStyle: {color: '#a1d8f1', fontSize: nowSize(12)}},
  }],
  yAxis: [{
    type: 'value',
    axisTick: {show: false,},
    axisLine: {show: true, lineStyle: {color: '#45647f', width: nowSize(1), type: 'solid'},},
    splitLine: {show: false},
    axisLabel: {show: true, textStyle: {color: '#a1d8f1', fontSize: nowSize(12)}}
  }],
  series: [{
    name: '门禁进入', type: 'bar', data: [20, 50, 80, 58, 83, 68, 57, 100],
    barWidth: nowSize(8), // 柱子宽度
    // barGap: 1, // 柱子之间间距
    // itemStyle: { color: '#14e3cc' }}, { name: '门禁外出', type: 'bar', data: [50, 70, 60, 61, 75, 87, 60, 62],
    // barWidth: nowSize(8), // barGap: 1, itemStyle: { color: '#f84f55' } }]
  }]
}

参考

Vue里使用 echarts

自己封装组件

准备一个vue-index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style/reset.scss">
  <title>echarts-demo-1</title>
</head>

<body>
<main>
  <section id="vueChartDemo">
  </section>
</main>
<script src="vue-main.js"></script>
</body>

</html>

安装演示用的依赖

yarn add vue@2.6.11
yarn add --dev @types/vue

遇坑

  • vue版本依赖包（vue@2.6.11 ） （vue-template-compiler@2.6.14）不匹配
  • 把版本号改成一样yarn add --dev vue-template-compiler@2.6.11
  • 在 vue 工程中，安装依赖时，需要 vue 和 vue-template-compiler 版本必须保持一致，否则会报错

入口文件vue-main.js

import Vue from 'vue'
import VueApp from './vue-app.vue'

new Vue({
  render: h => h(VueApp)
}).$mount(document.getElementById('vueChartDemo'))

入口组件vue-app.vue

<template>
  <div>
    Hi
  </div>
</template>

<script>
export default {
  name: 'vue-app'
};
</script>

启动服务运行，自动安装所需依赖

parcel src/vue-index.html

遇坑

  • 注意之前安装的是yarn global add parcel-bundler，而 不是yarn global add parcel
  • 查看版本是否一致：parcel --version或parcel -V，返回的是否是1.12.5，非@2.0.0beta版
  • 官方地址：https://www.parces.cn/
  • 否则会报错
    • console: [@vue/compiler-sfc] compileTemplate now requires the id option..`
    • xxx Uncaught TypeError: _vue.withScopeId is not a function
Vue引入外部 js 变量和方法
  • Vue中引入静态JS文件需要在有特殊含义的路径下，否则无效
  • store 数据
  • view 展示页面
  • components 组件
  • utils 工具函数
  • vendor或者libs第三方库
  • 脚本代码不放在assets或者static目录下
Vue中局部使用 echarts

演示组件./view/vue-charts.vue

<template>
  <div ref="container">
    vue-echarts
  </div>
</template>

<script>
export default {
  name: 'vue-echarts',
  mounted() {
    console.log(this.$refs.container);
  }
}
</script>
  • Vue中，通过另一种方式获取组件的 DOM，代替使用document.getElementById('...')
    • 因为Vue是单页面应用，如果将以上的组件使用两次，一个页面内 id 是不允许相同
    • 否则会出现第一个组件正常显示，第二个组件无法显示
  • 使用Vue的$refs对象，只要将组件注册属性ref="xxx"
  • 在mounted时调用this.$refs.xxx，避免 echarts 的容器还没有生成就进行初始化

引入到vue-app.vue

<template>
  <div id="vueChartDemo">
    <h2>在 Vue 中使用 echarts</h2>
    <vue-echarts></vue-echarts>
  </div>
</template>

<script>
import VueEcharts from './components/vue-echarts.vue'
export default {
  name: 'vue-app',
  components: {
    VueEcharts
  }
}
</script>

拆开并封装组件./src/modules/lineChart.js和./src/store/options/lineChartOptions.js

重构./src/store/chartData.js和./src/utils/loadMoreButton.js

// lineChartOptions.js
import {dateList, valueList} from '../chartData.js'

export const chartOptions = {
  baseOption: {...},
  media: [...]
}
// lineChart.js
import ...
echarts.use(
  [GridComponent, LineChart, CanvasRenderer]
)

import fitScreen from '../utils/fitScreen.js'
import {chartOptions as lineChartOptions} from '../store/options/lineChartOptions.js'

// 初始化加载DOM
const chartDom = document.getElementById('lineChart')
if (!chartDom) {return}
fitScreen(chartDom)

const myChart = echarts.init(chartDom, 'light')
const chartOptions
  = lineChartOptions

export {
  chartDom,
  myChart,
  chartOptions
}
// chartData.js
let n = 0
let m = 0

function createKey() {
  n += 1
  return `2021-6-${n}`
}

function createValue() {
  m += 1
  return m
}

let dateList = [createKey(), createKey(), createKey(), createKey(), createKey()]
let valueList = [createValue(), createValue(), createValue(), createValue(), createValue()]

export {
  m, n,
  createKey, createValue,
  dateList, valueList
}
// loadMoreButton.js
import {dateList, valueList, createKey, createValue} from '../store/chartData.js'

const loadMoreButton = document.getElementById('loadMore')
let isLoading = false
let newDateList = [...dateList]
let newValueList = [...valueList]

const renewData = function() {
  const key = createKey()
  const value = createValue()
  newDateList = [...newDateList, key]
  newValueList = [...newValueList, value]
}

const resetOption = function(myChart) {
  myChart.setOption({
    xAxis: {
      data: newDateList
    },
    series: [{
      data: newValueList
    }]
  })
}

const mockLoadData = function(myChart) {
  setTimeout(() => {
    resetOption(myChart)
    myChart.hideLoading()
    isLoading = false
  }, 1500)
}

const loadMoreData = function (myChart) {
  if (isLoading) {return}
  renewData()
  myChart.showLoading()
  isLoading = true
  mockLoadData(myChart)
}

export default function (buttonElement, myChart) {
  buttonElement.addEventListener('click', () => {
    loadMoreData(myChart)
  })
}

export {
  loadMoreButton,
  newDateList,
  newValueList,
  loadMoreData,
  renewData,
  resetOption
}

vue-charts.vue

<template>
  <div ref="container">
    vue-echarts
  </div>
</template>

<script>
// 按需引入 echarts 模块
import * as echarts from 'echarts/core'
import {
  TitleComponent, TooltipComponent, LegendComponent, GridComponent, TimelineComponent
} from 'echarts/components'
import {
  LineChart
} from 'echarts/charts'
import {
  CanvasRenderer
} from 'echarts/renderers'
import fitScreen from '../utils/fitScreen.js'
echarts.use(
  [TitleComponent, LegendComponent, TooltipComponent, TimelineComponent, GridComponent, LineChart, CanvasRenderer]
)

export default {
  name: 'vue-echarts',
  props: ['option', 'moreData', 'isLoading'],
  mounted() {
    fitScreen(this.$refs.container)
    this.chart = echarts.init(this.$refs.container, 'light')
    this.chart.setOption(this.option)
  },
  watch: {
    option() {
      this.chart.setOption(this.option)
    },
    moreData() {
      this.$emit('giveMoreData', this.chart)
    },
    isLoading() {
      this.isLoading ? this.chart.showLoading() : this.chart.hideLoading()
    }
  }
}
</script>
  • 将初始化后的chart挂在this上：this.chart = myChart.setOption({...})
    • 可访问this.chart
    • 当外部数据moreData改变，触发自定义事件giveMoreData给父组件vue-app.vue，并传参this.chart
  • 外部数据props传入echars所需的option

vue-app.vue

<template>
  <div>
    <h2>在 Vue 中使用 echarts</h2>
    <vue-echarts :option="option"
                 :moreData="n"
                 @giveMoreData="renewOptions($event)">
    </vue-echarts>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import ...

echarts.use(
  [GridComponent, LineChart, CanvasRenderer]
)

import VueEcharts from './view/vue-echarts.vue'
import {chartOptions as lineChartOptions} from './store/options/lineChartOptions.js'
import {resetOption, renewData} from './utils/loadMoreButton.js'

export default {
  name: 'vue-app',
  components: {
    VueEcharts
  },
  data() {
    return {
      n: 0,
      isLoading: false,
      option: lineChartOptions,
    }
  },
  methods: {
    loadMore() {
      this.n++
    },
    renewOptions(container) {
      if (this.isLoading) {return}
      renewData()
      container.showLoading()
      this.isLoading = true
      setTimeout(() => {
        resetOption(container)
        container.hideLoading()
        this.isLoading = false
      }, 1500)
    }
  }
}
</script>
Vue中全局使用 echarts

在项目文件的入口js文 main.js 中引入 echarts，并使用该插件，这样就可以对其进行全局使用

import echarts from 'echarts'

Vue.use(echarts)
Vue.prototype.$echarts = echarts
// 基于准备好的dom，初始化ECharts实例
const myChart = this.$echarts.init(document.getElementById('main'));
封装一个动态渲染数据的Echarts折线图组件
引入其他封装

参考

React里使用 echarts

自己封装组件
引入其他封装

参考

总结

  • echarts x Vue x TypeScript
  • echarts x React x TypeScript

什么是数据可视化

  • 用echarts做页面是最初级的可视化
  • 深入d3.js
  • 大屏项目

参考

在 Vue 记账中加入 ECharts

参考

About

No description or website provided.

Topics

vue2 echarts

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages