vue2.6x 使用echarts图表

后台管理系统必不可少的图表统计earchs,引入很简单官网中写了webpack引入earchs
下载：

当然 vue2.5引入的方式跟webpack有些区别的直接用import引入 ，main.js 引入

// 引入echarts
import echarts from 'echarts'
import  'echarts/lib/chart/map';
import 'echarts/map/js/china.js';
Vue.prototype.$echarts = echarts

例：

<template>
	<div class="chinaMap">
		<div id="map" ref="MapMountNode"></div>
	</div>
</template>

export default {
	data(){
		return{}
	},
	mounted() {
    this.$nextTick(() => {
     
      let option = {
            title: {
               
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['浏览数量/台', '成交车辆/台', '上拍车辆/台', ],
                width:100,
                height:200,
                bottom:40,
                right:50,
            },
            grid: {
                left: '3%',
                right: '15%',
                bottom: '3%',
                containLabel: true
            },
            
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['第一周', '第二周', '第三周', '第四周']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '浏览数量/台',
                    type: 'line',
                    data: [120, 732, 201, 564]
                },
                {
                    name: '成交车辆/台',
                    type: 'line',
                    data: [220, 582, 791, 534]
                },
                {
                    name: '上拍车辆/台',
                    type: 'line',
                 data: [150, 232, 501, 954]
                }
            ]
      };
      this.MapMountNode = this.$echarts.init(
        this.$refs.MapMountNode
      );
      this.MapMountNode.setOption(option);
      this.resize();
    });
  },
   methods: {
      resize() {
        this.MapMountNode.resize();
      },
  },
}