vue中使用echarts vue中使用echarts

教程：https://echarts.apache.org/zh/tutorial.html#在 webpack 中使用 ECharts
实例文档：https://echarts.apache.org/examples/zh/index.html
配置项：https://echarts.apache.org/zh/option.html#title
一、安装命令

npm install echarts --save

在vue文件中引入

import echarts from 'echarts' Vue.prototype.$echarts = echarts

在vue文件中

const echarts = require('echarts/lib/echarts')

二、或CDN引入 1、在public - index.html中

2、在vue.config.js中 externals中加 echarts: 'echarts'

const path = require('path')function resolve(dir) { return path.join(__dirname, dir) }module.exports = { chainWebpack: config => { config.resolve.alias .set('components', resolve('src/components')) .set('views', resolve('src/views')) config.externals({ vant: 'vant', echarts: 'echarts' }) }, lintOnSave: true // 打开 eslint 检查 }

【vue中使用echarts】3、在要使用的vue文件中

import echarts from 'echarts'

三、使用

data() { return { myChart: '' // 全局变量 } }, methods{ // 初始化数据 initData(res) { // 基于准备好的dom，初始化echarts实例 if (this.myChart != null && this.myChart !== '' && this.myChart !== undefined) { // 图标已存在先将图表销毁 this.myChart.dispose() }this.myChart = echarts.init(document.getElementById('myChart'))// 绘制图表 this.myChart.setOption({ backgroundColor: '#fff', tooltip: { trigger: 'item', formatter: '{a} {b} : {d}%' // 点击区块展示的占比 },legend: { orient: 'horizontal', left: 0, bottom: 80, data: ['完成数', '销单数'] },label: { normal: { position: 'inner', show: false, formatter: '{b}: {d}%' } },series: [ { name: '订单完成量', type: 'pie', selectedMode: 'single', radius: '70%', center: ['46%', '32%'], label: { show: false, position: 'inner' }, data: [ { value: 25, name: '完成数', itemStyle: { color: '#FF7200' }, selected: true }, { value: 66, name: '销单数', itemStyle: { color: '#FEE002' } } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) }}