vue组件封装echarts

<template>
  <div class="box-pie" style="height: 400px" ref="chart"></div>
</template>
<script>
  export default {
    name:"moreline",
    data(){
      return {
        chart:null,

      }
    },
    mounted() {
      this.getPage();
    },
    methods:{
      getPage() {
        // 引用chart并初始化
        this.chart = this.$echarts.init(this.$refs.chart);
        // 使用刚指定的配置项和数据显示图表。
        this.init()
        this.clickMethods()
      },
      init(){
        let option= {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['Evaporation', 'Precipitation', 'Temperature']
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                  type: 'shadow'
                }
              }
              ],
            yAxis: [
              {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value} ml'
                }
              },
              {
                type: 'value',
                name: 'Temperature',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value} °C'
                }
              }
              ],
            series: [
              {
                name: 'Evaporation',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                  return value + ' ml';
                }
              },
              data: [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6  ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
          return value + ' ml';
        }
      },
        data: [   2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6 ]
      },
        {
          name: 'Temperature',
            type: 'line',
          yAxisIndex: 1,
          tooltip: {
          valueFormatter: function (value) {
            return value + ' °C';
          }
        },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
        }
        ]
       }
        this.chart.setOption(option);
      },
      clickMethods(){
        let _this=this
        //this.chart.off('click');
        this.chart.getZr().off('click');
        this.chart.getZr().on('click',function (params) {
          //点击柱状图的整个区域生效方法
          var pointInPixel= [params.offsetX, params.offsetY];
          if (_this.chart.containPixel('grid',pointInPixel)) {
            /*此处添加具体执行代码*/
            var pointInGrid=_this.chart.convertFromPixel({seriesIndex:0},pointInPixel);
            //X轴序号
            var xIndex=pointInGrid[0];
            //获取当前图表的option
            var op=_this.chart.getOption();
            //获得图表中我们想要的数据
            var x=op.xAxis[0].data[xIndex];    //x轴名称
            // console.log(month)
            var value=op.series[0].data[xIndex];  //y轴数值
            // console.log(elementId+"-"+x+"-"+value)

            console.log(x)


          }
        })
      },
    }
  }
</script>

最后

以上就是威武板凳为你收集整理的vue组件封装echarts的全部内容，希望文章能够帮你解决vue组件封装echarts所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。