vue echarts折线图 折线堆积图和折线面积图

已于 2024-06-18 16:27:24 修改
阅读量459 收藏 3
点赞数 10
文章标签： vue.js echarts javascript
于 2024-04-26 15:16:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z18834071903/article/details/138219637
版权
本文介绍了如何在Vue项目中使用ECharts库创建折线堆积图和折线面积图，并实现图表随窗口大小调整。代码展示了如何初始化图表、设置选项、监听侧边栏和窗口大小变化以调整图表布局。
摘要由CSDN通过智能技术生成

vue echarts折线图 折线堆积图和折线面积图

1、折线堆积图和折线面积图的结合；
2、折线图单击和双击点击事件，点击图表任意位置；

上代码

<template>
  <section>
    <div
      id="performaceLineChart"
      ref="performaceLineChartRef"
      style="width: 100%; height: 500px"
    ></div>
  </section>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "", 
  components: {},
  props: {
},
  data() {
    return {
      chart: null,
      _thisForChart: null,
      _thisForWindow: null,
    };
  },
  watch: {},
  mounted() {
    this.$nextTick(() => {
      this.initLineChart();
      this.addEventListenerToSidebarContainer(this)
      this.addEventListenerToWindowResize(this)
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }

    this.removeEventListenerToSidebarContainer()
    this.removeEventListenerToWindowResize()

    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initLineChart() {
      var chartDom = document.getElementById("performaceLineChart");
      this.chart = echarts.init(chartDom);
      this.setOptions();
    },

    setOptions(option) {
      this.chart.setOption({
        color: ["#ee6666", "#5470c6", "#aeaeae", "#f9c858",],
        toolbox: {
          top: "0",
          right: "10",
          itemSize: 18,
          iconStyle: {
            borderColor: "#aeaeae",
            borderWidth: 2,
          },
          feature: {
            saveAsImage: {
              title: "导出图片",
              name: '导出图片名称'
            },
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba( 0, 0, 0,0.7)',
          borderColor: 'rgba( 0, 0, 0,0.7)',
          formatter: function (params) {
            var str = params[0].name + "</br>";
            for (let item of params) {
              str =`<span style='color: #fff;'>${str}</span><div style='display:flex;align-items:center;justify-content:space-between;'><span>${item.marker}<span style='color: #fff;'>${item.seriesName}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: #fff;'>${item.value}%</span></div>`;
            }
            return str;
          },
        },
        legend: {
          x: "center",
          y: "bottom",
          icon: "circle",
          textStyle: {},
          data: ['上海','广州','北京']
        },
        grid: {
          left: "0.5%",
          right: "1%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {},
          axisLine: {
            show: true,
            lineStyle: {},
            onZero: false, // X轴线始终位于底部
          },
          splitLine: {
            show: false,
          },
          data: ['2024-01-01','2024-01-02','2024-01-03','2024-01-04','2024-01-05','2024-01-06']
        },
        yAxis:[
          {
            type: "value",
            scale: true,
            // interval:  5,
            splitNumber: 5,

            // min: 'dataMin',
            // max: 'dataMax',

            // min: function(value) {
            //   return value.min
            // },
            // max: function(value) {
            //   return value.max
            // },

            alignTicks: true,

            // max: function (val) {
            //   if (Math.abs(val.max)>Math.abs(val.min)) {
            //     return (Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return (Math.abs(val.min)*1.2).toFixed(1);}},
            // min: function (val) {
            //   if(Math.abs(val.max)>Math.abs(val.min)){
            //     return-(Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return -(Math.abs(val.min)*1.2).toFixed(1);}},

            axisLabel: {
              show: true,
              formatter: (value) => {
                return `${value.toFixed(1)}%`
              }
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
              },
            },
          },
          {
            type: "value",
            // interval:  5,
            splitNumber: 5,

            // min: 'dataMin',
            // max: 'dataMax',

            // min: function(value) {
            //   return value.min
            // },
            // max: function(value) {
            //   return value.max
            // },

            // alignTicks: true,

            // max: function (val) {
            //   if (Math.abs(val.max)>Math.abs(val.min)) {
            //     return (Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return (Math.abs(val.min)*1.2).toFixed(1);}},
            // min: function (val) {
            //   if(Math.abs(val.max)>Math.abs(val.min)){
            //     return-(Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return -(Math.abs(val.min)*1.2).toFixed(1);}},

            axisLabel: {
              show: true,
              formatter: (value) => {
                return `${value}%`
              }
            },

            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
              },
            },
          },
          {
            type: "value",
            // interval:  5,
            splitNumber: 5,

            // min: 'dataMin',
            // max: 'dataMax',

            // min: function(value) {
            //   return value.min
            // },
            // max: function(value) {
            //   return value.max
            // },

            alignTicks: true,

            // max: function (val) {
            //   if (Math.abs(val.max)>Math.abs(val.min)) {
            //     return (Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return (Math.abs(val.min)*1.2).toFixed(1);}},
            // min: function (val) {
            //   if(Math.abs(val.max)>Math.abs(val.min)){
            //     return-(Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return -(Math.abs(val.min)*1.2).toFixed(1);}},

            axisLabel: {
              show: true,
              formatter: (value) => {
                return `${value.toFixed(1)}%`
              }
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
              },
            },
          },
          {
            type: "value",
            // interval:  5,
            splitNumber: 5,

            // min: 'dataMin',
            // max: 'dataMax',

            // min: function(value) {
            //   return value.min
            // },
            // max: function(value) {
            //   return value.max
            // },

            // alignTicks: true,

            // max: function (val) {
            //   if (Math.abs(val.max)>Math.abs(val.min)) {
            //     return (Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return (Math.abs(val.min)*1.2).toFixed(1);}},
            // min: function (val) {
            //   if(Math.abs(val.max)>Math.abs(val.min)){
            //     return-(Math.abs(val.max)*1.2).toFixed(0);} 
            //   else {
            //     return -(Math.abs(val.min)*1.2).toFixed(1);}},

            axisLabel: {
              show: true,
              formatter: (value) => {
                return `${value}%`
              }
            },
            
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
              },
            },
          },
        ],
        series: [
          {
            name: '上海',
            type: "line",
            // stack: "total",
            yAxisIndex: null,
            // smooth: true,
            showSymbol: false,
            lineStyle: { width: 2 },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },       
            areaStyle: null,
            data: ["-4.11", "11.12", "-5.13", "17.13", "2.13", "-19.13",],
          },
          {
            name: '广州',
            type: "line",
            // stack: "total",
            yAxisIndex: null,
            // smooth: true,
            showSymbol: false,
            lineStyle: { width: 2 },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },       
            areaStyle: null,
            data: ["13.51", "-6.12", "10.13", "4.13", "-10.13", "10.99",],
          },
          {
            name: '北京',
            type: "line",
            // stack: "total",
            yAxisIndex: 2,
            // smooth: true,
            showSymbol: false,
            lineStyle: { width: 0 },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },       
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgb(174,174,174)",
                  },
                  {
                    offset: 1,
                    color: "rgb(174,174,174)",
                  },
                ],
              ),
            },
            data: ["4.11", "1.12", "-5.13", "-7.13", "-5.93", "-6.13",],
          }
        ]
      });
       // 重点代码 避免单击点击事件重复执行
      this.chart.getZr().off('click')
      // 折线图单击点击事件(点击图表任意位置)
      this.chart.getZr().on('click', params => {
          console.log(params,'params========');
          const pointInPixel= [params.offsetX, params.offsetY];
          if (this.chart.containPixel('grid', pointInPixel)) {
            let pointInGrid = this.chart.convertFromPixel(
                {
                  seriesIndex: 0,
                },
                pointInPixel
              );
            let xIndex = pointInGrid[0]; // 点击的索引
            let optionNew = this.chart.getOption();
            let clickDate = optionNew.xAxis[0].data[xIndex]
            console.log(clickDate,'clickDate------------');
          }
      })
      
      // 重点代码 避免双击点击事件重复执行
      this.chart.getZr().off('dblclick')
      // 折线图双击点击事件(点击图表任意位置)
      this.chart.getZr().on('dblclick', params => {
          console.log(params,'params========');
          const pointInPixel= [params.offsetX, params.offsetY];
          if (this.chart.containPixel('grid', pointInPixel)) {
            let pointInGrid = this.chart.convertFromPixel(
                {
                  seriesIndex: 0,
                },
                pointInPixel
              );
            let xIndex = pointInGrid[0]; // 点击的索引
            let optionNew = this.chart.getOption();
            let clickDate = optionNew.xAxis[0].data[xIndex]
            console.log(clickDate,'clickDate------------');
          }
      })
    },

    // 监听侧边栏导航的宽度发生变化
    addEventListenerToSidebarContainer(_this) {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = _this;
      sidebarContainer &&
        sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
    },
    removeEventListenerToSidebarContainer() {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = null
      sidebarContainer &&
        sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
    },

    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this._thisForChart.chart.resize();
      }
    },

    // window 的尺寸发生变化的时候 会执行图表的resize
    addEventListenerToWindowResize(_this) {
      this._thisForWindow = _this;
      window.addEventListener("resize", this.windowResizeHandler);
    },
    removeEventListenerToWindowResize(_this) {
     this. _thisForWindow = null
      window.removeEventListener("resize", this.windowResizeHandler);
    },

    windowResizeHandler(e) {
      this._thisForWindow.chart.resize();
    },

  },
};
</script>

<style lang="scss" scoped>
 </style>

展示效果图
在这里插入图片描述

盐多碧咸。。
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts，每日一图——(平滑)折线面积图
four_three的博客
12-09 4603
昨天跟大家讲了平滑折线图，今天跟大家讲一下折线面积图。有平滑折线面积图和基础折线面积图两种效果： 其实二者只有一点点差别，接下来我们看下代码： //data.js mydata( { "data":[1,2,3,4,5], "zhi":[12,13,14,20,16] } ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
vue echarts 折线图 堆叠面积图
Z18834071903的博客
04-26 564
vue echarts 折线图 堆叠面积图
【Echarts系列】平滑折线面积图
最新发布
kk爱闹
06-11 512
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
echarts折线面积图
Y13349887034的博客
01-06 589
实现折线面积渐变并且更改了图例的显示效果
echarts 折线图之面积图
c_qianxia5040的博客
03-18 1659
option = { color: ['#B0D2F4', '#97D0A2'], title: { text: '车流量分时统计' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985'
vue2-Echarts-页面绘制多个折线图表
梁白开的博客
01-18 1267
1.有个需求是将图标题字符纵向排列，超出部分不展示，鼠标滑过时弹出提示框提示。刚开始使用echarts自带的title并且监听滑动事件实现，发现不知道为什么这个title的height更改时没有反应，所以不使用自带的，利用elementUI提供的el-tooltip实现此效果。
echarts-带面积的折线图
weixin_30301183的博客
09-03 379
测试地址 https://gallery.echartsjs.com/editor.html?c=x6p5SsIEzt var listN = '高温'; var unit = '°C'; //单位 var timeArray = ["20:00", "20:05", "20:10", "20:15", "20:20", "20:25", "20:30", "...
带阴影及动态效果的折线图（基于echarts.js）
06-21
- **区域图**：虽然标题中没有明确提到区域图，但Echarts中的区域图（area chart）和折线图有相似之处，它们都可用于表示趋势变化，区别在于区域图会填充折线下的面积，可以用来强调数据的范围。 - **混合开发**：...
自定义图表组件，支持柱状图，折线图，曲线图，饼图绘制
12-15
本文将深入探讨如何实现一个自定义图表组件，支持柱状图、折线图、曲线图和饼图的绘制。 首先，我们要了解这四种基本图表类型： 1. **柱状图**：柱状图是一种以矩形的高度或长度来表示数值大小的图表，通常用于...
echart各种酷炫图表,柱状图,折线图,仪表盘,雷达图.zip
12-12
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、仪表盘和雷达图等，能够帮助开发者轻松地在网页上实现交互式的数据展示。ECharts 的设计思想是轻量级、模块化...
oview:Vue移动端图表库（饼状图，柱状图，条形图，折线图，雷达图，散点图，气泡图等）
05-14
oView Vue.js移动端图表库oView是基于 图表库的二...目前oview支持：柱状图，饼状图，面积图，散点图，气泡图，折线图 ，雷达图。2、图表配置简单<!-- 没错，配置一个饼状图就是这么简单---><o-chart :data="d
qushitu.rar_qushitu_趋势图_趋势图控件
09-21
首先，趋势图的基本概念是通过折线、柱状、面积等形式展示数据在时间序列上的变化趋势。它可以用来展示销售额、股票价格、温度等各种可量化的数据。在编程中，趋势图的实现通常涉及数据处理、图形渲染和交互设计等多...
vue引用echarts折线平滑面积图
boy火巨的博客
07-17 2699
vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.csdn.net/qq_42221334/article/details/95354424 主要代码： <template> <div> <div class="cardList_title">用户活跃度</div> <d...
Echarts之折线图(面积图)制作
顺从
12-20 8257
官方学习地址: http://echarts.baidu.com/examples.html#chart-type-line W3C参看学习地址: https://www.w3cschool.cn/echarts_tutorial/ 引入 ECharts ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要
【Echarts】详解 折线图/面积图！！！快来看看吧！！
Milk~每天分享一点点，技术进步一点点
09-09 7082
折线图/面积图 的实现 先看效果 文件目录 获取Echarts 引入Echarts <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script> &l
echarts-折线图与柱状图，图形的标记，堆叠
m0_74019046的博客
05-21 1137
如果要画一个图标就需要在series里加一个对象。data中定义图标的数据。xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。
Echarts基础图表--折线（面积）图_干货
chunlu2438的博客
05-08 2182
Echarts基础图表 -- 折线（面积图） #####上次介绍了Echarts的基本图表组件，现在就应用基本组件来生成图表吧 首先，在使用Echarts时，要先引用Echarts，由于Echarts是基于JavaScript的，所以我们直接引用它即可，如下： <script type=...
vue echarts 折线图
10-15
好的，关于 Vue 和 Echarts 折线图的问题，我可以为您提供一些帮助。首先，您需要在 Vue 项目中安装 Echarts，可以使用以下命令进行安装： ``` npm install echarts --save ``` 然后，在需要使用折线图的组件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值