VUE echarts 柱状图、折线图 双Y轴 显示

已于 2023-10-16 17:03:24 修改
阅读量2.1k 收藏 6
点赞数 2
文章标签： vue.js echarts 前端
于 2023-10-12 16:15:39 首次发布
懒虫
本文链接：https://blog.csdn.net/xcbzsy/article/details/133793315
版权

在这里插入图片描述
weekData: [“1周”,“2周”,“3周”,“4周”,“5周”,“6周”,“7周”,“8周”,“9周”,“10周”], //柱状图横轴
jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据
cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图1的数据
plgtData: [200, 200, 430, 360, 500, 500, 500, 450, 580, 500], // 柱状图2的数据
jdgtData: [300, 200, 100, 400, 100, 200, 100, 350, 380, 300], // 柱状图3的数据
cygtData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据

  //千分位格式
  stateFormat(num,n=2,symbol) {
       // 保证为number类型
       num = Number(num)
       if(typeof num!=='number')throw new TypeError('num参数应该是一个number类型');
       if(n<0)throw new Error('参数n不应该小于0');
       var hasDot=parseInt(num)!=num;//这里检测num是否为小数，true表示小数
       var m=(n!=undefined&&n!=null)?n:1;
       num=m==0?num.toFixed(m)+'.':hasDot?(n?num.toFixed(n):num):num.toFixed(m);
       symbol=symbol||',';
       num=num.toString().replace(/(\d)(?=(\d{3})+\.)/g,function(match, p1,p2) {
           return p1 + symbol;
       });
       if(n==0||(!hasDot&&!n)){//如果n为0或者传入的num是整数并且没有指定整数的保留位数，则去掉前面操作中的小数位
           num=num.substring(0,num.indexOf('.'));
       }
       return num;
   },
            
  // xAxisData:x轴的值, lineData1：已接单数量, lineData2：差异数量, barData1:工厂产能工天, barData2：已接单工天 ,lineData3 差异工天
  drawLine(xAxisData, lineData1, lineData2, barData1, barData2 , barData3)
  {
      var that = this;
      let eChart = echarts.init(document.getElementById("echart")); // 基于准备好的dom，初始化echarts实例
      that.eChart = eChart;
      eChart.setOption({
          // 绘制图表
          title: {text: ""},
          //悬浮标
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              },
              // formatter: '{a}: {c}', //官方
              formatter(params) {  //自定义
                  var relVal = params[0].name;
                  for (var i = 0, l = params.length; i < l; i++) {
                      //relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(0)
                      relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + that.stateFormat(params[i].value,0)
                  }
                  return relVal;
              },

          },
          grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true,
          },
          legend: {//图例名
              show: true,
              data: ['已接单工天','差异工天', '已接单数量', '差异数量'],
              x: 'center',        //图例在中间center 左边left 右边right
              textStyle: {        //图例字体的颜色
                  color: "#000" ,  //图例文字
              },
              selected:{
                '已接单数量':false,
                '差异数量' :false
            }
          },

          xAxis: [
              // x轴 10周
              {
                  type: "category",
                  axisTick: {
                      show: false, // 坐标轴刻度
                  },
                  axisLine: {
                      show: true, // 坐标轴轴线
                      lineStyle: {
                          //color: "#eeeeee",
                          color: '#cccccc'
                      }
                  },
                  axisLabel: {
                      // 坐标轴刻度标签的相关设置
                      inside: false,
                      textStyle: {
                          color: "#999",
                          fontWeight: "normal",
                          fontSize: "12",
                      },
                  },
                  splitLine: {show: false}, // 去除网格线
                  axisPointer: {
                      type: 'shadow',
                  },
                  data: xAxisData,
              },
              {
                  type: "category",
                  axisLine: {show: false}, // 是否显示坐标轴轴线
                  axisTick: {show: false}, // 是否显示坐标轴刻度
                  axisLabel: {show: false}, // 是否显示刻度标签 柱状图上的标签
                  splitArea: {show: false}, // 是否显示分隔区域 背景遮罩
                  splitLine: {show: false}, // 是否显示分隔线
              },
          ],
          yAxis: [
              // y轴
              {
                  type: "value",
                  max: value => {
                      const { max, min } = value;
                      const absMax = Math.max(Math.abs(max), Math.abs(min));
                      return Math.floor(absMax * 1.2);
                  } ,
                  min: value => {
                      const { max, min } = value;
                      const absMax = Math.max(Math.abs(max), Math.abs(min));
                      return Math.floor(-absMax * 1.2);
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          //color: "#eeeeee",
                          color: '#cccccc'
                      },
                  },
                  axisLabel: {
                      textStyle: {
                          color: "#bac0c0",
                          fontWeight: "normal",
                          fontSize: "12",
                      },
                      formatter: "{value}",
                  },
                  splitLine: {
                      show: true, // 去除网格线
                      lineStyle: {
                          color: '#f8f8f8',
                      }
                  },
              },{
                  type: "value",
                  max: value => {
                      const { max, min } = value;
                      const absMax = Math.max(Math.abs(max), Math.abs(min));
                      return Math.floor(absMax * 1.2);
                  } ,
                  min: value => {
                      const { max, min } = value;
                      const absMax = Math.max(Math.abs(max), Math.abs(min));
                      return Math.floor(-absMax * 1.2);
                  },
                  axisLabel: {
                      textStyle: {
                          color: "#bac0c0",
                          fontWeight: "normal",
                          fontSize: "12",
                      },
                      formatter: "{value}",
                  },
                  splitLine: {
                      show: true, // 去除网格线
                      lineStyle: {
                          color: '#f8f8f8',
                      }
                  },
              }

          ],
          series: [
              // { // 柱状图1 工厂产能工天
              //     type: "bar",
              //     name: '工厂产能工天',
              //     itemStyle: {
              //         show: true,
              //         //color: "#7ca6f8",  // 柱状图的颜色
              //         color: "#5470C6",  // 柱状图的颜色
              //         borderWidth: 0,
              //         borderType: "solid",
              //         emphasis: {
              //             shadowBlur: 15,
              //             shadowColor: "rgba(105,123, 214, 0.7)",
              //         },
              //     },
              //     zlevel: 1,
              //     barWidth: 40,
              //     data: barData1,
              // },
              { // 柱状图2  已接单工天
                  type: "bar",
                  name: '已接单工天',
                  yAxisIndex: 1 ,
                  itemStyle: {
                      show: true,
                      // color: "#6ebbb8",
                      color: "#91CC75",
                      borderWidth: 0,
                      borderType: "solid",
                      emphasis: {
                          shadowBlur: 15,
                          shadowColor: "rgba(105,123, 214, 0.7)",
                      },
                  },
                  label: {
                      show: true,
                      position: 'insideRight',
                      // formatter: '{c}'
                      // formatter(params) {  //自定义
                      //     relVal = that.stateFormat(params.value,0);
                      //     return relVal;
                      // },
                  },
                  zlevel: 2,
                  barWidth: 40,
                  data: barData2,
              },
              { // 柱状图1 工厂差异工天
                  type: "bar",
                  name: '差异工天',
                  yAxisIndex: 1 ,
                  itemStyle: {
                      show: true,
                      //color: "#7ca6f8",  // 柱状图的颜色
                      color: "#5470C6",  // 柱状图的颜色
                      borderWidth: 0,
                      borderType: "solid",
                      emphasis: {
                          shadowBlur: 15,
                          shadowColor: "rgba(105,123, 214, 0.7)",
                      },
                  },
                  label: {
                      show: true,
                      position: 'insideRight',
                      // formatter: '{c}'
                      // formatter(params) {  //自定义
                      //     relVal = that.stateFormat(params.value,0);
                      //     return relVal;
                      // },
                  },
                  zlevel: 1,
                  barWidth: 40,
                  data: barData3,
              },
              { // 折线1  已接单数量
                  zlevel: 3,
                  type: "line",
                  name: '已接单数量',
                  color: ["#8d83f7"],  // 拐点颜色
                  symbolSize: 8,   // 拐点的大小
                  symbol: "circle",  // 拐点样式
                  label: {
                      show: true,
                      position: 'top',
                      // formatter: '{c}'
                      // formatter(params) {  //自定义
                      //     relVal = that.stateFormat(params.value,0);
                      //     return relVal;
                      // },
                  },
                  data: lineData1,
                  itemStyle: {
                      normal: {
                          lineStyle: {
                              color: "#8d83f7", // 折线的颜色
                              type: "solid",    // 折线的类型
                          }
                      }
                  },
                  // tooltip: {
                  //     formatter: '{b}<br/>已接单数量：{c}<br/>',
                  // }
              },
              { // 折线2  差异数量
                  zlevel: 4,
                  type: "line",
                  name: '差异数量',
                  color: ["#ef836f"],  // 拐点颜色
                  symbolSize: 8,       // 拐点的大小
                  symbol: "circle",    // 拐点样式
                  label: {
                      show: true,
                      position: 'top',
                      // formatter: '{c}'
                      // formatter(params) {  //自定义
                      //     relVal = that.stateFormat(params.value,0);
                      //     return relVal;
                      // },
                  },
                  data: lineData2,
                  itemStyle: {
                      normal: {
                          lineStyle: {
                              color: "#ef836f", // 折线的颜色
                              type: "solid" ,   // 折线的类型
                          }
                      }
                  },
                  // tooltip: {
                  //     formatter: '{b}<br/>差异数量：{c}<br/>',
                  // }
              }
          ],
      });
  },
新老农
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Visual Studio Code (echarts)数据可视化，柱状图与折线图混合，实现降水量，蒸发量，温度变化
qq_45894761的博客
04-26 5858
初始化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
vue中使用echarts(2)(折线图柱状图混用，双y轴问题)
cygdxcw的博客
07-26 6675
echarts导入问题 如果要查看echarts的详细引入步骤，请查看文档《vue中使用echarts(1)》。此处只分享echarts初始化遇到的一些问题和配置项的使用。 在一个页面的两个不同组件都用到echarts时会出现一个问题，第一个echarts可以正常显示，切换到另一个组件时，其中的echarts图表的宽高会变成100*100.解决办法是切换组件时初始化该组件中的echarts图表。（...
ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表
最新发布
wqqstudy的博客
05-22 726
ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表 利用某地区一年的降水量和蒸发量数据绘制双y轴的折线图与柱状图混搭图表，
学习使用echarts实现双刻度echarts双Y轴，左右Y轴数据的方法
徊忆羽菲
12-28 2590
学习使用echats实现双刻度echarts双Y轴，左右Y轴数据的方法
常用的Echart的 一些配置（折线图双Y轴）
喜欢做一些demo，和分享遇到的 BUG
02-08 5885
一、折线图和柱状图 xAxis: { axisLine:{ // 是否显示坐标线 show:false, }, splitLine:{ show:false }, // 横线分割线 axisLabel: { textStyle: {
echart设置双Y轴折线图（以及折线图格式设置）
qq_34377273的博客
03-25 4136
百度的ECharts图标大大方便了我们的开发，但是各个区域默认属性的设置往往不切人意。这里我写了一些我用ECharts图标识折线图属性的设置方式。 option = { tooltip: { trigger: 'axis', axisPointer: { ...
【ECharts】Y轴
joanmelon的博客
12-07 8882
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
ECharts y坐标轴(yAxis)使用详解
热门推荐
旭东怪的博客
08-05 4万+
yAxis 说明：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置offset属性防止同个位置多个 Y 轴的重叠。 1 yAxis.id 说明：组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。 默认：无。 参数类型：string。 2 yAxis.show 说明：是否显示 y 轴。 默认：true。 参数类型：boolean。 可选值： （1）true，显示y轴...
Echarts概念篇(坐标轴)
weixin_45113879的博客
05-16 3971
Echarts概念篇(坐标轴)
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
杜永康的博客
12-26 3万+
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //坐标轴刻度文字数据。symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
ECharts的基本配置-Y轴配置（yAxis）
Dreadom的博客
01-30 1328
【代码】ECharts的基本配置-Y轴配置（yAxis）
在vue中使用echarts(折线图的demo,markline用法)
10-15
通过以上步骤，你已经在Vue中成功实现了ECharts折线图并添加了markline功能。你可以根据项目需求调整配置，以展示不同类型的图表和自定义标记线。记得在实际项目中根据实际情况调整样式和数据源，以满足实际需求。
实现ECharts双Y轴左右刻度线一致的例子
09-16
总结，实现ECharts双Y轴刻度线一致的关键在于正确配置两个Y轴的`min`、`max`、`splitNumber`和`interval`属性，并确保它们的刻度线颜色、样式等保持一致。同时，通过计算最大值和最小值来调整Y轴的范围，以达到理想...
vue实现折线图 可按时间查询
10-14
在本文中，我们将探讨如何使用Vue.js框架实现一个动态的、可以根据时间查询的折线图。这个功能对于数据分析和展示非常有用，特别是当需要展示随时间变化的趋势数据时。我们将从以下几个方面详细介绍实现过程： 1. *...
vue使用echarts图表的详细方法
10-17
- y轴表示销量 - 数据以柱状图形式展示，每种商品的销量对应一个柱子 总的来说，Vue结合Echarts能够帮助开发者轻松创建交互式的数据可视化应用。通过合理地引入和配置Echarts，你可以创建出复杂且高效的图表，以...
echarts横向堆叠柱状图.zip
10-11
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等。在本案例中，我们关注的是如何在 ECharts 中实现横向堆叠柱状图。首先，我们需要...
小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图
牛哞哞杂记
10-02 4277
微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图 本来使用的是wxcharts，但发现实现不了左右双y轴的效果，就换成echarts 要实现的效果如下： 效果图。。。 要实现这样的效果，需要以下几步： （1）去github下载插件，放进自己的项目里 呐，链接 ===>点击这里 只需要将名称是ec-canvas的文件夹放进自己项目里。 像这样： 小图片。。。 （2）分别写...
Vue 3 使用 vue-echarts 的柱状图 barItem 和 x, y 轴点击事件实现
weixin_68465735的博客
08-03 4053
作为 CV 程序员，第一时间搜索网上的解决方案，但是基本都是 Vue 3 搭配 ECharts 实现的，作为菜鸟且项目已经使用 vue-echarts 实现了图标的需求，所以那就只能借鉴ECharts 的实现方案，然后看有没有对应的方法。我们可以看到我们点击的位置不同，params 中的 componentType 的值是不一样的，所以我们可以通过点击事件回调给我们的 params 中的 componentType 参数来区分点击的是哪里，然后做出相应的事件处理；
【vue3/echarts】vue3中使用echarts/饼图/双轴双数据柱状图
Xiang_Gong_Ya_的博客
11-07 424
【代码】【vue3/echarts】vue3中使用echarts/饼图/双轴双数据柱状图。
echarts柱状图加折线
08-25
Echarts 是一个基于 JavaScript 的数据可视化库，可以帮助开发人员快速构建各种图表。在 Echarts 中，要实现柱状图加折线的效果，可以使用组合图（Mixed Chart）功能。 在 Vue 开发中使用 Echarts，可以按照以下步骤进行操作： 1. 首先，你需要在项目中引入 Echarts 库。可以通过 npm 安装 echarts，然后在项目中引入 echarts。 2. 在 Vue 组件中，按照 Echarts 的文档，设置好需要展示的数据和配置项。 3. 创建一个 div 元素作为图表的容器，通过 ref 属性获取该元素的引用。 4. 在 Vue 的 mounted 生命周期函数中，使用引入的 Echarts 库初始化图表，并将容器和配置项传递给 Echarts 实例。 5. 最后，将图表实例挂载到 Vue 组件中，即可在页面上显示柱状图加折线的效果。 下面是一个示例代码，展示了如何在 Vue 中实现柱状图加折线的效果： ```javascript <template> <div ref="chart" style="width: 100%; height: 400px;"></div> </template> <script> import echarts from 'echarts'; export default { mounted() { const chart = echarts.init(this.$refs.chart); const option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], }, yAxis: [ { type: 'value', name: '柱状图', }, { type: 'value', name: '折线图', }, ], series: [ { name: '柱状图', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130], }, { name: '折线图', type: 'line', yAxisIndex: 1, data: [20, 40, 50, 30, 15, 25, 35], }, ], }; chart.setOption(option); }, }; </script> ``` 在上述代码中，通过设置 xAxis、yAxis 和 series 来配置柱状图和折线图的相关参数。其中，xAxis 配置 x 轴数据，yAxis 配置 y 轴数据，series 配置图表的系列数据。将配置项传递给 Echarts 实例后，使用 setOption 方法来渲染图表。最后，将图表实例挂载到 Vue 组件中的 div 容器中，即可在页面上显示柱状图加折线的效果。 希望以上信息能够对你有所帮助，如果有任何疑问，请随时提问。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)](https://blog.csdn.net/wuzhiyue2/article/details/118530433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值