vue 使用echarts（一）

使用步骤：
1. 安装：cnpm install echarts --save
2. mian.js 引入:

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

3.组件内部使用：

let myChart = this.$echarts.init(document.getElementById('myChart'))

4.封装echarts函数（案例：双折线图）

/*
*params: 
*titleText:表头
*myChart:初始化的charts(第三步中的myChart)
*arr:图表数据
*yName:y轴顶部名称
*yData：y轴刻度数据
*/
exports.install = function (Vue, options) {
  Vue.prototype.lineChart = function (titleText,myChart,arr,yName,yData) {
    var option = {
      title: {
        text: titleText,
        x: 'center',
        top:10         //具体容器顶部的距离；也可以用百分比 如：“10%”
      },
      tooltip : {
        trigger: 'axis' ,// 触发方式，坐标轴触发
        //自定义提示框样式
        formatter: function (params) {
          var res='<div style="width: 200px;text-align: center"><p>'+params[0].name+'</p></div>'; //第一行
          for(var i=0;i<params.length;i++){
            res+='<p style="width:200px;text-align: center">'+params[i].seriesName+'：'+params[i].data+'</p>'
          }
          return res;
        },
      },
        // dataZoom: [{                  //--图表滑动条
        //   "show": true,
        //   "height": 20,
        //   "start": 0,
        //   "end": 100,
        //   handleSize: '110%',
        //   borderColor:"#90979c",
        //   showDataShadow:false,//显示数据趋势
        //   textStyle:false,//两端提示文字
        //   top:"98%"
        // },],

      legend: {                   //图例
        data:['峰值','均值'],
        // left:"92%",
        top:"10%"
      },
      // toolbox: {
      //   show : true,
      //   feature : {   //右上角的工具条显示哪些
      //     saveAsImage : {show: true}
      //   },
      // },
      grid: {
        left: '5%',
        bottom:'15%'
      },
      xAxis : [
        {
          type : 'category',
          name:'日期时间',
          data : arr.map(function (item) {
            // console.log("item----",item.xlebal)
            return item.xlebal;
          }),
          boundaryGap: false,
          axisLabel: {
            // interval:function (index,val) {//自定义x轴刻度间隔
            //     console.log(val);
            // },
            formatter: function (value) {//自定义刻度样式
              var str = value.split(" ");
              return str[0]+"\n"+str[1];
            }
          },
          // axisLine:{               //x轴 颜色
          //   lineStyle:{
          //     color:{
          //       type: 'linear',
          //       colorStops: [{
          //         offset: 0, color: '#53A7FF' // 0% 处的颜色
          //       }, {
          //         offset: 1, color: '#53A7FF' // 100% 处的颜色
          //       }]
          //     }
          //   }
          // }
        }
      ],
      yAxis : [
        {
          type : 'value',
          data:yData,
          splitNumber:4,//刻度分割
          name:yName,
          splitLine: {
            show: false
          }
        }
      ],
      series : [
        {
          name:'峰值',
          type:'line',
          data: arr.map(function (item) {
            return item.max;
          }),
          itemStyle:{
            color:"#CE6767"
          }
        },
        {
          name:'均值',
          type:'line',
          data: arr.map(function (item) {
            return item.average;
          }),
          itemStyle:{
            color:"#53A7FF"
          }
        }
      ]
    };
    myChart.setOption(option);
  }
}

外层的容器要固定宽高（最外层），否则如果是不断调用echarts封装的函数 宽度会越来越宽
转
https://www.cnblogs.com/wisewrong/p/6558001.html