vue-echarts踩坑记录

最近手头一个项目需要做两个图,一个是折线图,一个饼图。由于是基于Vue的项目,第一时间就想到用vue-echarts来实现。vue-echarts本质上也是使用了echarts.js,只是包装成vue组件。

1、安装vue-echarts包

npm install vue-echarts

2、引用vue-echarts

template:

<echarts :options="trendChart" ref="trendEchart"></echarts>

3、折线图

js:

import ECharts from "vue-echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";

export default {
  trendChart: {
    grid: {
      left: '10%',
      top: 52,
    },
    tooltip: {
        trigger: 'axis',
        showContent: true,
        position:function(p){   
          return [p[0] + 10000000000, 0]; //不需要显示弹层信息
        },
        formatter: (parmes)=>{  //选择折线图上的坐标可以获得相关值
          let value1 = parmes[0];
          let value2 = parmes[1];
          //拿到值后,需要在哪显示可以在这操作
  
        }
    },
    textStyle: {
      color: "#999",
    },
    label:{
      fontSize: 44,
    },
    xAxis: {
        type: 'category', //类目的行式,原样展示
        boundaryGap: false, //两边留白策略
        offset: 3, 
        axisLine:{
          show:false, //x坐标轴线是否显示,默认显示
        },
        axisTick:{
          show: false,
        },
        axisLabel: {
          interval: 10000,   //默认1,表示【隔一个标签显示一个标签】
          showMinLabel: true, //x轴只需要展示最小的和最大的值
          showMaxLabel: true,
          fontSize: 20,
        },
        data: [], 
    },
    yAxis: {
        type: 'value',
        boundaryGap: false,
        axisLine:{
          show:false,
        },
        axisLabel:{
          fontSize: 22,
        },
        axisTick:{
          show: false,
        },
    },
    series: [{
        name: '本组合',
        type: 'line',
        smooth: true,
        color: '#e2b256',
        data: []
    },{
      name: '上证指数',
      type: 'line',
      smooth: true,
      color: '#5eb8e2',
      data: []
    }]
  },
}
components: {
  echarts: ECharts,
}

4、折线图效果

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章