echart示例总结（持续更新）

洛尧

已于 2023-10-17 22:51:55 修改

阅读量1.9k

点赞数

分类专栏：前端文章标签： echarts vue.js 前端

于 2022-10-17 13:09:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43144103/article/details/127342771

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文档记录了在Vue项目中使用ECharts的一些示例和经验，包括初始化、销毁和调整大小的处理，以及各种图表类型如折线图、柱状图的定制技巧，如坐标轴样式、区域颜色、渐变色等。同时也分享了如何处理特殊情况，如用假配置添加标签和应对窗口缩放的适配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、before

echart官网示例页（https://echarts.apache.org/examples/zh/index.html）
以示例的形式记一些【在vue项目中】用到过的示例、费劲搜过的问题。
点开官网示例页，然后随便点进一个图例，整段CV。
本人也是小白，有错误或不足请评论指出。
匆忙发布，多处待补充

二、init、dispose和resize

首先用id或者class获得你准备好的容器，

const myChart = this.$echarts.init(document.getElementById('dom1'));
myChart.setOptions(option);

如果一个容器里要根据条件显示多个chart，为防止出现

There is a chart instance already initialized on the dom.

和其他报错，需判断容器里chart是否存在，存在则销毁重新init。
将myChart定义在this.data里，在每次setOptions前调用方法initChart：

    initChart() {
      if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
        this.myChart.dispose(); //销毁
      }
      this.myChart = this.$echarts.init(document.querySelector('.chart'));
    },

画好之后会发现，窗口缩放时echart不会自己适配，所以需要resize。
resize有两种，一种直接跟在init后给window加事件，

const myChart = this.$echarts.init(document.getElementById('dom1'));
myChart.setOptions(option);
window.addEventListener('reisze', function(){
	myChart.resize();
})

一种在mounted里，如果是这样就需要搭配销毁

mounted() {
	window.addEventListener('resize', this.resizeChart); //方法名不加()
},
destroyed() {
	window.removeEventListener('resize', this.resizeChart); 
},
methods: {
	resizeChart() {}, //myChart写在全局
}

三、示例

（1）通用

坐标轴名字，位置，隐藏，颜色；距容器边距；

option = {
  grid: {
    top: '20%',
    left: '10%',
    right: '20%',
    bottom: '5%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: [0, 1, 2, 3],
      axisTick:{
        show: false, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisLabel: {
        color: 'rgba(17, 140, 221, 0.8)',
        fontSize: 14,
      },
    },
  ],
  yAxis: {
    name: '时间',
    nameLocation: 'end',
    position: 'right',
    min: -10,
    max: 30,
    nameTextStyle: {
      color: 'rgba(17, 140, 221, 0.8)',
      verticalAlign: 'top',
      fontSize: 14,
      padding: [-30, 0],
    },
    type: 'value',
    // show: false, // 不显示name、线、刻度、文字
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
    axisTick:{
      show: false, // 不显示坐标轴刻度线
    },
  },
  series: [     
    {
      data: [10, 15, -5, 25],
      type: 'line',
      smooth: true,
    }
  ]
};

在这里插入图片描述

区域背景色splitArea；区域分割线splitLine；隐藏圆点；

option = {
  xAxis: {
    type: 'category',
    position: 'top',
    //show: false,
    axisLabel: {
      color: 'rgba(17,140,221,1)'
    },
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisTick:{
      show:false // 不显示坐标轴刻度线
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    lineStyle: {
      width: 1,
      shadowColor: 'rgba(0,0,0,0.8)',
      shadowBlur: 8,
      shadowOffsetY: 15
    },
    splitLine: { //分割线
      show: true,
      lineStyle: {
        color: 'rgba(17, 140, 221, 0.8)',
        type: 'dashed',
        width: 0.8,
      },
    },
    splitArea: { //区域背景色
      show: true,
      areaStyle: {
        color: ['transparent', 'rgba(17,140,221,0.1)'],
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {show: false},
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
  },
  series: [
    {
      data: [820, 932, 901, 934, 950, 1030, 1320],
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: 'rgba(17,140,221,1)',
          },
        },
      },
      lineStyle: {
        width: 2,
        color: 'rgba(225,103,34,1)',
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 15
      },
    },
  ]
};

在这里插入图片描述

自定义样式：formatter和rich；function

对扇面的label自定义样式示例：

option = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    left: 'center',
    bottom: 45,
    itemWidth: 12,
    itemHeight: 6,
    textStyle: {
      color: 'black',
      fontSize: 13,
    },
  },
  grid: {
    top: 15,
    left: 18,
    right: '10%',
    bottom: 60
  },
  series: [
    {
      type: 'pie',
      radius: ['0', '46%'],
      color: [
        '#6c5ce7',
        '#fab1a0',
        'RGBA(112, 173, 71, 1)',
        '#0984e3',
        'RGBA(212, 212, 0, 1)',
        '#d63031',
        'RGBA(158, 72, 14, 1)',
        '#0984e3',
        'RGBA(99, 99, 99, 1)',
      ],
      avoidLabelOverlap: true, 
      showEmptyCircle: false,
      label: {
        show: true,
        color: '#ddd',
        alignTo: 'labelLine',
        fontSize: 12,
        rich: {
          a: {
            fontSize: 14,
            color: 'inherit',
            fontStyle: 'oblique',
            fontWeight: 'bold',
            lineHeight: 21,
          },
          c: {
            color: '#ddd',
            fontSize: 12,
          },
          b: {
            color: 'inherit',
            fontSize: 12,
          }
        },
        formatter: function (o) {
          return [
            '{b|' + o.name + '}',
            '{a|' + o.value + '}' //元
          ].join('\n');
        },
      },
      labelLine: {
        showAbove: true,
        length2: 6,
        length: 18,
        lineStyle: {
          color: 'rgba(17,140,221,1)',
          cap: 'round', //没起作用
        },
      },
      emphasis: {
        scale: true,
        scaleSize: 16,
      },
      data: [
        { value: 41, name: '1' },
        { value: 12, name: '2' },
      ],
    },
  ],
}

在这里插入图片描述

一种用假配置添加label的方法

比如这种应用场景：
一个x坐标轴对应多对数据，还要给每组数据加上label，用div贴上去怕错位，我的解决办法是：把label作为一个假的x轴加进去，隐藏这个x轴的其他所有信息，只留name。

option = {
  xAxis: [
    {
      type: 'category',
      name: '温度',
      nameLocation: 'start',
      nameTextStyle: {
        color: 'rgba(0,0,0,0.8)',
        verticalAlign: 'top',
        fontSize: 14,
        padding: [120, 0],
      },
      position: 'top',
      //show: false,
      axisLabel: {
        color: 'rgba(17,140,221,1)'
      },
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisTick:{
        show:false // 不显示坐标轴刻度线
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      lineStyle: {
        width: 1,
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 15
      },
      splitLine: { //分割线
        show: true,
        lineStyle: {
          color: 'rgba(17, 140, 221, 0.8)',
          type: 'dashed',
          width: 0.8,
        },
      },
      splitArea: { //区域背景色
        show: true,
        areaStyle: {
          color: ['transparent', 'rgba(17,140,221,0.1)'],
        }
      }
    },
    { //假数据 最高温度
      type: 'category',
      position: 'top',
      name: '最高\n温度\n(℃)',
      nameLocation: 'start',
      nameTextStyle: {
        color: 'rgba(0,0,0,0.8)',
        verticalAlign: 'top',
        fontSize: 14,
        padding: [120, 0],
      },
      splitLine: {show: false},
      axisLine: {
        show: false, // 不显示坐标轴线
        onZero: false,
      },
      axisTick:{
        show:false // 不显示坐标轴刻度线
      },
    },
    { //假数据 最低温度
      type: 'category',
      position: 'top',
      name: '最低\n温度\n(℃)',
      nameLocation: 'start',
      nameTextStyle: {
        color: 'rgba(0,0,0,0.8)',
        verticalAlign: 'top',
        fontSize: 14,
        padding: [220, 0],
      },
      splitLine: {show: false},
      axisLine: {
        show: false, // 不显示坐标轴线
        onZero: false,
      },
      axisTick:{
        show:false // 不显示坐标轴刻度线
      },
    },
  ],
  yAxis: {
    type: 'value',
    splitLine: {show: false},
    min: -20,
    max: 50,
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
  },
  series: [
    { //最高温
      data: [28.2, 30, 28.2, 27.4, 26.0, 28.0, 27.8],
      type: 'line',
      smooth: true,
      symbolSize: 0.1,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: 'rgba(225,103,34,1)',
            position: "top",
            fontSize: 14,
          },
        }
      },
      lineStyle: {
        width: 2,
        color: 'rgba(225,103,34,1)',
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 10
      },
      areaStyle: {
        color: 'rgba(21,147,224,0.2)',
        origin: 'start',
      }
    },
    { //最低温
      data: [20, 22.8, 22.6, 21, -12, 19, 21],
      type: 'line',
      smooth: true,
      symbolSize: 0.1,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: 'rgba(17,140,221,1)',
            position: "top",
            fontSize: 14,
          },
        },
      },
      lineStyle: {
        width: 2,
        color: 'rgba(17,140,221,1)',
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 15
      },
      areaStyle: {
        color: 'rgba(21,147,224,0.1)',
        origin: 'start',
      },
    }
  ]
};

在这里插入图片描述

共用坐标轴，我不会

【待补充】所以我用了两个子容器，其中一个用绝对定位，粘在一起。。。

（2）折线图

区域颜色

【待补充】目前不会分上下两部分

option = {
  xAxis: {
    type: 'category',
    position: 'top',
    //show: false,
    axisLabel: {
      color: 'rgba(17,140,221,1)'
    },
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisTick:{
      show:false // 不显示坐标轴刻度线
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    lineStyle: {
      width: 1,
      shadowColor: 'rgba(0,0,0,0.8)',
      shadowBlur: 8,
      shadowOffsetY: 15
    },
    splitLine: { //分割线
      show: true,
      lineStyle: {
        color: 'rgba(17, 140, 221, 0.8)',
        type: 'dashed',
        width: 0.8,
      },
    },
    splitArea: { //区域背景色
      show: true,
      areaStyle: {
        color: ['transparent', 'rgba(17,140,221,0.1)'],
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {show: false},
    min: -20,
    max: 50,
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
  },
  series: [
    { //最高温
      //data: [28.2, 30, 28.2, 27.4, 26.0, 28.0, 27.8],
      data: [
        [0, 28.2],
        [1, 30],
        [2, 29],
        [3, 27.4],
        [4, 26],
        [5, 28.2],
        [6, 25],
      ],
      type: 'line',
      smooth: true,
      symbolSize: 0.1,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: 'rgba(225,103,34,1)',
            position: "top",
            fontSize: 14,
          },
        }
      },
      lineStyle: {
        width: 2,
        color: 'rgba(225,103,34,1)',
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 10
      },
      areaStyle: {
        color: 'rgba(21,147,224,0.2)',
        origin: 'start',
      }
    },
    { //最低温
      //data: [20, 22.8, 22.6, 22.7, 22.9, 23.1, 22.9],
      data: [
        [0, 20],
        [1, 22.8],
        [2, 22.6],
        [3, 21],
        [4, -12],
        [5, 19],
        [6, 21],
      ],
      type: 'line',
      smooth: true,
      symbolSize: 0.1,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: 'rgba(17,140,221,1)',
            position: "top",
            fontSize: 14,
          },
        },
      },
      lineStyle: {
        width: 2,
        color: 'rgba(17,140,221,1)',
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 15
      },
      areaStyle: {
        color: 'rgba(21,147,224,0.1)',
        origin: 'start',
      },
    }
  ]
};

在这里插入图片描述

有断点

data用数组表示 https://echarts.apache.org/zh/option.html#series-line.data

option = {
  xAxis: {
    type: 'category',
    position: 'top',
    //show: false,
    axisLabel: {
      color: 'rgba(17,140,221,1)'
    },
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisTick:{
      show:false // 不显示坐标轴刻度线
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    lineStyle: {
      width: 1,
      shadowColor: 'rgba(0,0,0,0.8)',
      shadowBlur: 8,
      shadowOffsetY: 15
    },
    splitLine: { //分割线
      show: true,
      lineStyle: {
        color: 'rgba(17, 140, 221, 0.8)',
        type: 'dashed',
        width: 0.8,
      },
    },
    splitArea: { //区域背景色
      show: true,
      areaStyle: {
        color: ['transparent', 'rgba(17,140,221,0.1)'],
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {show: false},
    min: -20,
    max: 50,
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
  },
  series: [
    {
      //data: [28.2, 30, 28.2, 27.4, 26.0, 28.0, 27.8],
      data: [
        [0, 28.2],
        [1, 30],
        [2],
        [3, 27.4],
        [4, 26],
        [5, 28.2],
        [6, 25],
      ],
      type: 'line',
      smooth: true,
      symbolSize: 0.1,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: 'rgba(225,103,34,1)',
            position: "top",
            fontSize: 14,
          },
        }
      },
      lineStyle: {
        width: 2,
        color: 'rgba(225,103,34,1)',
        shadowColor: 'rgba(0,0,0,0.8)',
        shadowBlur: 8,
        shadowOffsetY: 10
      },
    },
  ]
};

在这里插入图片描述

（3）柱状图

渐变色

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick:{
      show:false // 不显示坐标轴刻度线
    },
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
    splitLine:{
      show:false // 不显示网格线
    },
  },
  yAxis: {
    type: 'value',
    show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick:{
      show:false // 不显示坐标轴刻度线
    },
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
    splitLine:{
      show:false // 不显示网格线
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: 14,
      itemStyle : { 
        normal: {
          label : {
            show: true,
            color: '#3977E6',
            position: "top",
          },
          barBorderRadius: [7, 7, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [
              {offset: 0, color: '#3977E6'},
              {offset: 1, color: '#37BBF8'},
            ]
          )
        },
      },
    }
  ]
};

在这里插入图片描述

（4）其他

好玩的。留意一下这里的两种padding

option = {
  title: {
    // text: '工时分布(0704-0925)'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['项目1', '项目2'],
    textStyle: {
      fontSize: 16,
    }
  },
  grid: {
    top: 35,
    left: '3%',
    right: '4%',
    bottom: '13%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    data: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周','第8周','第9周','第10周','第11周','第12周',''],
    offset: 5,
    // padding: [10,0],
    axisLine: {
      show: false,
      // symbolOffset: [10,0],
      padding: [10,10],
    },
    axisLabel: {
      // symbolOffset: [10,0],
      padding: [0,-60,0,0],
    },
    axisTick: {
      show: false,
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
    },
  },
  series: [
    {
      name: '项目1',
      type: 'line',
      step: 'start',
      symbolSize: 0,
      data: [0,0,34, 40,37,38,1,12,4,0,7,10,3,3],
      areaStyle: {
        color: 'rgba(58,175,255,0.1)',
      }
    },
    {
      name: '项目2',
      type: 'line',
      step: 'end',
      symbolSize: 0,
      data: [ 40,40, 40, 40, 40,3, 12,4,0,7,18,3,3,3],
      areaStyle: {
        color: 'rgba(170,255,99,0.1)',
        origin: 'end',
      }
    }
  ]
};