在vue中使用Echarts绘制叠堆折线面积图（可切换叠堆柱状图）

Wh1T3ZzT

已于 2023-01-03 09:30:00 修改

阅读量2.3k

点赞数

分类专栏： ECharts 文章标签： echarts vue.js javascript

于 2022-12-27 12:03:33 首次发布

本文链接：https://blog.csdn.net/weixin_44748171/article/details/128453542

版权

ECharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

效果
一、全局引入ECharts
- 1.安装ECharts
- 2.main.js全局引入
二、页面中使用
- 1.创建可视化图表的存放位置
- 2.渲染ECharts
总结
- toolbox
- ECharts鼠标事件

效果

在这里插入图片描述

我这里用的框架是Element+vue，将可视化图表用card卡片包起来，这个叠堆折线面积图主要实现的功能有：

1.默认进入时看到的是叠堆折线面积图，在点击对应的元素切换显示该元素的详情，比如我这里点仓库库存则会改变显示为仓库库存的详情，并且切换成叠堆折线图。
2.右上角工具栏的设计，包含返回，保存为PDF图片，切换折线图，切换柱状图，数据视图
3.点击上边的卡片会切换90天，30天，7天的数据显示（暂未实现后续更新）

一、全局引入ECharts

1.安装ECharts

npm install echarts --save

2.main.js全局引入

//引入ECharts制作数据可视化
import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

new Vue({
  echarts,
  render: h => h(App)
}).$mount('#app')

二、页面中使用

1.创建可视化图表的存放位置

我这里用的是Element的UI，利用布局+卡片，具体可以去看Element的官方文档，这边就放一个核心代码：

<div class="mar-top-20" id="linechart" ref="linechart" style="width:100%;height:400px;"></div>

2.渲染ECharts

先上代码

linechart(){
      var chartDom = this.$refs['linechart']
      var myChart = this.$echarts.init(chartDom);
      var option;
      var option1;
      var option2
      option1 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: [`${this.$t('Warehouse_capacity')}`, '使用库容', '在途库容', '剩余库容', '使用仓位','可用仓位'],
          left:'left'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView:{},
            magicType: {type: ['line', 'bar']}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '仓库库容',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '使用库容',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '在途库容',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '剩余库容',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'bottom'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '使用仓位',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'bottom'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          },
          {
            name: '可用仓位',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'bottom'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [100, 932, 901, 934, 1290, 1330, 1320]
          }
        ],
      };
      option2 = {
        title: {
          text: '各仓库详细数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CEBU01', 'MNL-01-VALENZUELA', 'MANILA02', 'CDO01', 'TAIWAN02','MNL-02-BULACAN']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          itemSize: 15,
          itemGap:8,
          feature: {
            myBreak:{
              show:true,
              title:'返回',
              icon: `image://${require('@/assets/images/back.png')}`,
              onclick:function () {
                myChart.clear();
                option = option1;
                option && myChart.setOption(option);
              }
            },
            saveAsImage: {},
            dataView:{},
            magicType: {type: ['line', 'bar']}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'CEBU01',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'MNL-01-VALENZUELA',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'MANILA02',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'CDO01',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'TAIWAN02',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          },
          {
            name: 'MNL-02-BULACAN',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      // 默认显示第一个chart
      option = option1;
      option && myChart.setOption(option);
      //根据窗口的大小变动图表 --- 重点
      window.onresize = function(){
        option && myChart.setOption(option);
        myChart.resize(); 
      }
      // 点不同的按钮，就切换不同的option，要记得先清除上一个chart，否则会叠加在一起显示
      myChart.on('click',(params)=>{
        if (option == option1) {
          myChart.clear();
          option = option2;
          option && myChart.setOption(option);
        }else{
          return
        }
        console.log(params);
      })
    }

chartDom：获取创建的div的Dom
myChart：渲染主体
option：渲染内容，此处注意一个重要的点，切换可视化视图本质就是切换option中的显示，我这里有两个option（option1,option2），在不同的情况下进行显示切换

option && myChart.setOption(option);

这行就代表渲染，当窗口改变时需要重新渲染，当切换显示时也需要重新渲染

window.onresize

获取窗口改变的事件，在窗口改变时触发重绘，达到自适应图标的目标

myChart.on(‘click’,(params)=>{
})

这里就是获取图标的点击事件，触发函数执行对应的逻辑

总结

这里有一些**知识点(keng)**需要注意

toolbox

toolbox: {
          itemSize: 15,
          itemGap:8,
          feature: {
            myBreak:{
              show:true,
              title:'返回',
              icon: `image://${require('@/assets/images/back.png')}`,
              onclick:function () {
                myChart.clear();
                option = option1;
                option && myChart.setOption(option);
              }
            },
            saveAsImage: {},
            dataView:{},
            magicType: {type: ['line', 'bar']}
          }
        },

toolbox是自定义工具栏，这里需要注意一点在调用自己本地的图标时，一定要保证格式正确，调用前必须加：image://，否则无效
我这里是vue中使用的方法需要require()才可以生效：

icon: image://${require('@/assets/images/back.png')},

除了这种调用方式还有：

1、URL 为图片链接例如：

‘image://http://xxx.xxx.xxx/a/b.png’

2、URL 为 dataURI 例如：

‘image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7’

3、通过 ‘path://’ 将图标设置为任意的矢量路径

‘path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z’

然后就是一些属性

toolbox中的属性，不包含五个工具。里面最主要的就是feature这个，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。

toolbox.show

boolean

默认值为true，是否显示工具栏组件

toolbox.orient

stirng

默认值为horizontal，工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”

toolbox.itemSize

number

默认值为15，工具栏 icon 的大小。

toolbox.itemGap

number

默认值为10，工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。

toolbox.showTitle

boolean

默认值为true，是否在鼠标 hover 的时候显示每个工具 icon 的标题。

toolbox.feature

Object

各工具配置项。

除了各个内置的工具按钮外，还可以自定义工具按钮。

注意，自定义的工具名字，只能以 my 开头。
下面来分别介绍这五个工具

saveAsImage：这个工具可以把图表保存为图片。里面有些常用的参数，type->保存图片的格式，name->保存文件的名字，backgroundColor->保存图片的背景色，show->是否显示该工具，还有一些别的属性可以自己再使用的时候查询API文档。

restore：配置项还原。主要属性是show->是否显示该工具。

dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show->是否显示该工具，readOnly->是否不可编辑，optionToContent->自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串，backgroundColor->数据视图浮层背景色。

dataZoom：数据区域缩放。目前只支持直角坐标系的缩放(这里的含义就是柱状体，折线图可以缩放，但是像饼状图就不能缩放)。show->是否显示该工具。

magicType：动态类型切换。show->是否显示该工具，type->这是个数组，启用的动态类型，包括’line’(切换为折线图), ‘bar’(切换为柱状图), ‘stack’(切换为堆叠模式), ‘tiled’(切换为平铺模式)。

ECharts鼠标事件

事件是用户或浏览器自身执行的某种动作，如click、mouseover、页面加载完毕后触发load事件，都属于事件。
为了记录用户的操作和行为路径，需要完成鼠标事件处理和组件交互的行为事件的处理。

click：在目标元素上，单击鼠标左键时触发。不能通过键盘触发
dblclick：在目标元素上，双击鼠标左键时触发
mouseup：在目标元素上，鼠标按钮被释放弹起时触发。不能通过键盘触发
mousedown：在目标元素上，鼠标按钮 (左键或右键)被按下时触发。不能通过键盘触发
mouseover：鼠标移入目标元素上方时触发。鼠标移动到其后代元素上也会触发
mousemove：鼠标在目标元素内部移动时不断触发。不能通过键盘触发
mouseout：鼠标移出目标元素上方时触发
globalout：鼠标移出了整个图表时触发
contextmenu：鼠标右键单击目标元素时触发，即鼠标右键单击事件，会弹出一个快捷菜单