echarts 是一款js组件库， 能够绘制各种类型的图表数据， 功能强大。官网文档 https://echarts.apache.org
上面总结下在vue2我的项目中的应用
1.npm 装置 echarts
npm install echarts --S
2.引入echarts的全家桶，在vue index.html 引入内部js

//从node_modules 中copy echarts.min.js 到定义的static_front 目录下<script src="/static_front/module/echarts/echarts.min.js"></script>

3.在webpack.base.conf 中配置内部组件插件

//在externals选项中配置externals：{  echarts：“echarts”}

4.在main.js 中导入，并定义成全局属性

import * as echarts from 'echarts'//这两行特地留神：这是绘制中国热力求用， 装置最新版echarts5.3.0后，并没有map/json/china.json， 我是从v4.9.0 中复制来的import china from '@static_front/module/echarts/china.json'echarts.registerMap('china', china)Vue.prototype.$echarts = echarts

5.在组件chart.vue中绘制图表

// 定义接收图表的容器<el-row class="div-graphic">      <div style="width:100%;height: 400px;" id="bar">      </div>    </el-row>
// 定义echarts 实例对象this.barCharts = this.$echarts.init(document.getElementById("bar")) //实例this.barCharts.showLoading(this.chartsLoadingStyle)  //loading显示，定义款式//这里能够是request 交互,失去option 须要的数据        this.barCharts.setOption(option) this.barCharts.hideLoading() //暗藏loading

6.上面看看各个图表的option 配置

//柱状图barOption =  {        color: ['#3398DB'], // 系列调色板, 色彩列表        title: { //图形题目                text: title,                 textStyle:{                  fontSize:14                },                left:25, //组件离容器左侧的像素值                          top:0,              },        tooltip: { //提醒            trigger: 'axis', //触发类型  item 数据项触发 axis坐标轴触发            axisPointer : {//指示器配置项                type : 'shadow'  //line直线指示器 shadow 暗影指示器                  }        },        grid:{//网格设置          //left: "9%", //默认是10%        },        toolbox:{ //工具箱          show: true,          feature:{//要显示的工具,除了内置的工具外，还能够自定义            dataView: { //数据视图              readOnly: true            },            magicType: {//类型切换              type: ["line", "bar"]            },            restore: {}, //还原            saveAsImage: {} //保留为图片，默认type=png          }        },              xAxis: { //x轴                type: 'category', //category 类目轴 value：数字轴  time:time轴 log:对数轴                boundaryGap: true,  //true 标签和数据都会在刻度线两头，   false: 标签和数据都在刻度线上                data: category,  //类目轴 数据                splitLine:{                    show:false  // 坐标轴在 grid 区域中的分隔线。默认是显示的                },                axisLabel:{ //类目轴标签的斜度和格式化                  formatter:function(value){                    let rst = value                    if(value.length >5){                      rst = value.substring(0,5) + "..."                    }                    return rst                  }                                                      },              },        yAxis: { //y轴          type: 'value',          axisLine:{//value坐标轴轴线设置            show: true,          },          axisTick:{ //value坐标轴刻度设置            show:true          }        },        series: [{  //系列                  name : this.typeMapping[this.cond.event_type]+'量',  //系列名称， 用于tooltip, legend 时的显示                  type : "bar",                  barWidth: 30,                  data : data                 }]      }
//饼图pieOption = {                title : {                            text: title,                            textStyle:{                                fontSize:14                            },                  left:25, //组件离容器左侧的像素值                            top:0,                          },                tooltip: {                    trigger: 'item',                    formatter: function (params,ticket,callback) {                      var name = '';                      for(var i = 0 ; i < params['name'].length;i++){                        name += params['name'][i];                        if(i > 0 && i % 20 == 0){                          name += '<br />'                        }                      }                      return params['seriesName'] + '<br />' + name + ' : ' + params['value'] + '('+params['percent']+'%)'                            },                },                legend: { //图例                  orient: 'vertical',                            data: category,                  left:'62%',                            top:"10%",                            formatter:function(value){                                    var rs = value;                                    if(value.length > 25){                                        rs = value.substring(0,25) + '...'                                    }                                    return rs                                }                          },                series: [{ //系列                  name : this.typeMapping[this.cond.event_type] +'量', //系列名称                  type : "pie",                  top: '5%',                  radius : '50%', //饼图的半径                  center: ['35%', '50%'],//中心点 距x轴，y轴的间隔                  data : data,                  minAngle : 1, //最小扇形的大小， 避免值是0的扇形看不成成果                  label : {//图形上的标签文字                    show : true,                    formatter: function(param){                      var rs = param['name'];                      if(rs.length > 15){                        rs = rs.substring(0,14) + '...'                      }                      return rs                    },                                                                              },                            }],                              }
//热力求mapOption = {              color: ['#3398DB'],                        title : {                            text: this.typeMapping[this.cond.event_type] + '数据地区散布',                            textStyle:{                                fontSize:14                            },                            left:25, //组件离容器左侧的像素值                            top:0,                        },                        tooltip : {                            trigger: 'item'                        },                        grid: {                top: 0,                bottom: 0              },                            visualMap: { //视觉映射组件，相当于echarts4中的dataRange, 次要是对地图视觉上的成果设置，比方色彩，定义图元自身的视觉和指标系列的视觉                  type: 'continuous', //continuous: 连续型  'piecewise'： 分段型                            left:'15%',//图元离直坐标系左侧间隔                            top:'60%',                            min: 0, //图元最大最小值                            max: max,                            text:['高','低'],                  calculable: true, //是否显示拖曳用的手柄                  realtime: false, //拖曳过程中是否实时更新                                    inRange: { //扭转图元的色彩和指标系列色彩 从'#DDFDFE'到'#006EDD' 逐渐加深                      color: ['#DDFDFE', '#006EDD'],                      //symbolSize: [60, 200] //是图元大小                      }                            //splitNumber:8  // 被分段的个数，在type=piecewise中无效， 默认值是5                        },                                      series : [                                            {                    name: this.typeMapping[this.cond.event_type] + '数据地区散布',                    type: 'map',                    map: "china",                    //roam: 'scale', //开启鼠标缩放                    selectedMode : 'multiple', // 选中模式，示意是否反对多个选中                                       label:{show:true}, //地图上的label 是否显示                    data: data,                            }                        ],                        //animation: false //是否开启动画                    }