Echarts升级6：提示框自定义样式 + 折线图定义折线色值 + 柱状图色值

最新推荐文章于 2023-08-17 17:09:54 发布

BMG-Princess

最新推荐文章于 2023-08-17 17:09:54 发布

阅读量290

点赞数

分类专栏： Echarts进阶文章标签： echarts

本文链接：https://blog.csdn.net/Hei_lovely_cat/article/details/113697910

版权

Echarts进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客分享了如何使用ECharts库，通过简洁的代码实现折线图和柱状图的颜色定制，以及提示框的高级样式设置。作者通过设置itemStyle和color函数实现了折线色值和柱状图色值的循环效果，并提供了自定义padding的提示框内容。这些技巧大大减少了代码量，提高了代码的可读性和效率。

摘要由CSDN通过智能技术生成

配图：

配代码：

tooltip下加入：

backgroundColor: 'rgba(248,252,253,0.8)', //通过设置rgba调节背景颜色与透明度
extraCssText: 'box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35)',
color: '#353638',
borderColor: '#77bef7',
textStyle: {
  color: '#353638',
},

另：给个padding

           //浮窗内容
            formatter(params) {
              var pa = ''
              //自发挥
              return '<div style="padding:15px 30px 15px 15px;">' + pa + '</div>'
            }

折线色值

series: [{
            name: '质控浓度',
            type: 'line',
            data: this.actualConcentration,
//折线色值
            itemStyle: {
              normal: {
                color: '#5EC2DF',
              }
            }
          }, {
            name: '标物浓度',
            type: 'line',
            data: this.standardConcentration,
//折线色值
            itemStyle: {
              normal: {
                color: '#EDAC6D',
              }
            }
          }],

柱状图色值

配图：

自红线后开始循环，多次循环也满足！

膜拜大神，三行代码替代别人几十行代码！！！取余可以快捷的实现循环！！！

series: [{
            type: 'bar',
            // barWidth: 5,
            barGap: '80%',
            /*多个并排柱子设置柱子之间的间距*/
            barCategoryGap: '50%',
            /*多个并排柱子设置柱子之间的间距*/
            data: this.valueLine,
            itemStyle: {
              normal: {
                //取余可以快捷的实现循环
                color: function (params) {
                  var colorList = ['#5EC2DF','#EDAC6D','#CC6633','#F9E8DC','#5BD27C'];
                  return colorList[params.dataIndex % colorList.length];
                }
              }
            }
          }],