将echarts开发为Vue的插件使用

echarts的使用方法一般为两种:
一是组件内部单独使用 即导入直接使用
二是挂载到vue原型上全局使用

我们还可以把echarts开发成插件使用,就像vant

1. 新建plugins文件夹 新建echarts.js文件
2. 在echarts.js文件中:

// 开发插件
import echarts from "echarts"
import 'echarts/map/js/china'

const install = function (Vue) {
  // Vue.prototype.demo = function() {

  // }
  Object.defineProperties(Vue.prototype, {
    $myChart: {
      get() {
        return {
          // line(id) {
          //   // 基于准备好的dom，初始化echarts实例
          //   var myChart = echarts.init(document.getElementById(id));

          //   // 指定图表的配置项和数据
          //   var option = {
          //     title: {
          //       text: 'ECharts 入门示例'
          //     },
          //     tooltip: {},
          //     legend: {
          //       data: ['销量']
          //     },
          //     xAxis: {
          //       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          //     },
          //     yAxis: {},
          //     series: [
          //       {
          //         name: '销量',
          //         type: 'line',
          //         data: [5, 20, 36, 10, 10, 20]
          //       }
          //     ]
          //   };

          //   // 使用刚指定的配置项和数据显示图表。
          //   myChart.setOption(option);
          // },
          ChinaMap(id, data) {
            var myEcharts = echarts.init(document.getElementById(id));
            var option = {
              tooltip: {  //这里设置提示框
                triggerOn: 'click',  //数据项图形触发
                backgroundColor: "red",  //提示框浮层的背景颜色。
                //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
                formatter: '地区：{b}<br/>确诊人数：{c}'
              },
              visualMap: {//视觉映射组件
                orient: 'horizontal',
                type: 'piecewise',
                bottom: 0,
                realtime: false,  //拖拽时，是否实时更新
                calculable: true,  //是否显示拖拽用的手柄
                pieces: [
                  {
                    min: 0,
                    max: 0,
                    color: '#ffffff',
                  },
                  {
                    min: 1,
                    max: 100,
                    color: '#FDFDCF',
                  },
                  {
                    min: 100,
                    max: 1000,
                    color: '#FE9E83',
                    symbolSize: 10
                  },
                  {
                    min: 1000,
                    max: 5000,
                    color: '#E55A4E'
                  },
                  {
                    gte: 5000,
                    color: 'rgb(174, 33, 44)'
                  }
                ],
                itemWidth: 10,
                itemHeight: 10,
                textGap: 2,
                padding: [5, 10]
              },
              series: [
                {
                  name: '省',
                  type: 'map',
                  mapType: 'china',
                  roam: false,//是否开启鼠标缩放和平移漫游
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 8
                      }
                    },
                  },
                  zoom: 1.2,  //地图缩放比例,默认为1
                  emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                    label: { show: true }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: 'rgba(0,255,236,0)',
                      borderColor: 'rgba(0,0,0,0.2)'
                    },
                    emphasis: {
                      areaColor: 'rgba(255,180,0,0.8)',
                      shadowOddsetX: 0,
                      shadowOddsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0
                    }
                  },
                  top: "40",//组件距离容器的距离
                  aspectScale: 0.75,
                  layoutCenter: ['5%', '5%'],
                  data
                  // data: [
                  //   { name: '北京', value: 350000 },
                  //   { name: '天津', value: 120000 },
                  //   { name: '上海', value: 300000 },
                  //   { name: '重庆', value: 92000 },
                  //   { name: '河北', value: 25000 },
                  //   { name: '河南', value: 20000 },
                  //   { name: '云南', value: 500 },
                  //   { name: '辽宁', value: 3050 },
                  //   { name: '黑龙江', value: 80000 },
                  //   { name: '湖南', value: 2000 },
                  //   { name: '安徽', value: 24580 },
                  //   { name: '山东', value: 40629 },
                  //   { name: '新疆', value: 36981 },
                  //   { name: '江苏', value: 13569 },
                  //   { name: '浙江', value: 24956 },
                  //   { name: '江西', value: 15194 },
                  //   { name: '湖北', value: 41398 },
                  //   { name: '广西', value: 41150 },
                  //   { name: '甘肃', value: 17630 },
                  //   { name: '山西', value: 27370 },
                  //   { name: '内蒙古', value: 27370 },
                  //   { name: '陕西', value: 97208 },
                  //   { name: '吉林', value: 88290 },
                  //   { name: '福建', value: 19978 },
                  //   { name: '贵州', value: 94485 },
                  //   { name: '广东', value: 89426 },
                  //   { name: '青海', value: 35484 },
                  //   { name: '西藏', value: 97413 },
                  //   { name: '四川', value: 54161 },
                  //   { name: '宁夏', value: 56515 },
                  //   { name: '海南', value: 54871 },
                  //   { name: '台湾', value: 48544 },
                  //   { name: '香港', value: 49474 },
                  //   { name: '澳门', value: 34594 }
                  // ]
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myEcharts.setOption(option);
          }
        }
      }
    }
  })
}
export default install

3. main.js中导入刚才的文件import echarts from '@/plugins/echarts' 然后Vue.use(echarts)
4. 就可以在组件中使用了:

    // 显示地图
    this.$myChart.ChinaMap('main', [])