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中

<!-- 引入 echarts的 JS 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.common.js"></script>

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 检查
}

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} <br/>{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)'
              }
            }
          }
        ]
      })
    }

}

image.png