在vue中使用echarts,实现代码复用

ECharts入门指南：快速上手折线图实例

最新推荐文章于 2025-11-12 09:51:16 发布

原创最新推荐文章于 2025-11-12 09:51:16 发布 · 468 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端同时被 3 个专栏收录

30 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用ECharts库，详细讲解了如何通过Canvas和SVG渲染器创建图表，以及如何设置折线图样式并实现复用。重点展示了设置图表选项和响应窗口大小的方法。

开发中一般都会选择echarts来绘制图表，使用也很方便。

安装echarts

npm  install echarts --save
// 或者
cnpm install echarts --save

引入 ECharts

在main.js中引入

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

渲染器的使用

默认使用 Canvas 渲染，Canvas 更适合绘制图形元素数量非常大。如果想使用 SVG 渲染，代码中须包括有 SVG 渲染器模块。

// 获取要渲染的节点
let containerDom = document.getElementById('customId')
// 使用 Canvas 渲染器（默认）
let chart = this.$echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于：
let chart = this.$echarts.init(containerDom);

// 使用 SVG 渲染器
let  chart = this.$echarts.init(containerDom, null, {renderer: 'svg'});

使用实例

一种图表样式多处复用，此次拿折线图举例

设置图表样式

lineChart(chartName, data, name) {
	chartName.setOption({
		   tooltip: {
          trigger: 'axis',
        },
        color: '#5B8FF9 ',
        grid: {
          top: '22%',
          left: '2%',
          right: '4%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true, // 0开始
          data: data[0].x,
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#b0b3b8',
            },
          },
        },
        yAxis: {
          type: 'value',
          // max,min 导致图表y轴的轴线不均等
          // max: 'dataMax',
          // min: 'dataMin',
          name: name,
          nameTextStyle: { color: '#b0b3b8' },
          // max:Math.max(...a),
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0e1c3d', // 网格线
            },
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#b0b3b8',
            },
          },
        },
        axisPointer: {
          // 指示器
          type: 'line',
          lineStyle: {
            width: 2.5,
            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#eee',
              },
              {
                offset: 1,
                color: '#060B20',
              },
            ]),
          },
        },
        series: data.map((v) => {
          return {
            name: v.x_data,
            type: 'line',
            stack: '总量',
            data: v.y,
            showSymbol: name == '( 分钟 )' ? true : false,
            symbol: 'circle', //标记的图形
            symbolSize: 6,
            zlevel: 9, // 层级设置，指示器隐藏于拐点下
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#395DCA',
                },
                {
                  offset: 0.5,
                  color: '#56D3E0',
                },
                {
                  offset: 1,
                  color: '#BAC2CD',
                },
              ]),
              borderColor: '#70C8FF', //拐点边框颜色
              //  borderWidth:3//拐点边框大小
              emphasis: {
                color: '#96F5FF', //hover拐点颜色定义
                borderWidth: 3,
              },
            },
            areaStyle: {
              color:
                name == '( 分钟 )'
                  ? new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(48,117,160,0.46)',
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(100,209,222,0.20)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(38,77,167,0.39)',
                      },
                    ])
                  : 'transparent',
            },
          }
        })
	})
	window.addEventListener('resize', () => {
        chartName.resize()
  	})
}

调用方式

 
 let sceneChart = this.$echarts.init(
        document.getElementById(‘chartName’),
        null,
        { renderer: 'canvas' },
 )
 let tableData = [x:['黑龙江', '海南', '云南', '广东'],y:[81, 78, 75, 72]]
 let unit = ''
 this.lineChart(sceneChart, tableData, unit)