ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Echart柱状图背景板

2022-07-29 18:05:13  阅读:256  来源: 互联网

标签:Echart color 背景 item 柱状图 series 100 data 255


 

 

 这种连续的背景板需要自己写背景series

echart只提供斑马线背景板 areaStyle

重点:

1.需要写两个y轴

2.需要多写一个series 并把data处设为[100,100,100,100,...] 

3.需要为每个series都写上yAxisIndex或者xAxisIndex看需求是横向柱状图还是纵向柱状图

双Y轴:

  yAxis: [
        {
          type: 'category',
          data: yAxisData.map((item, index) => ({
            value: item,
            textStyle: {
              width: 115,
              color: 'rgba(255, 255, 255, 0)',
              backgroundColor: {
                image:
                  item === '移动'
                    ? yidong
                    : item === '联通'
                    ? liantong
                    : dianxin,
              },
            },
          })),
          //y轴边线
          axisLine: {
            lineStyle: {
              width: 3,
              color: '#4A70C2',
            },
          },

          axisLabel: {
            margin: 35,
            height: 150,
            textStyle: {
              fontSize: 32,
              // color: 'red',
            },
          },
          position: 'left',
        },
        {
          data: yAxisData,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'left',
        },
      ],

背景series:

{
      name: '',
      type: 'bar',
      barWidth: 160,
      yAxisIndex: 1,
      // yAxisIndex: 0,
      data: [100, 100, 100],
      itemStyle: {
        normal: {
          color: 'rgba(56,128,255,0.14)',
          borderColor: 'rgba(56,145,255,0.20)',
          borderWidth: 4,
        },
      },
    }

 

标签:Echart,color,背景,item,柱状图,series,100,data,255
来源: https://www.cnblogs.com/Simoon/p/16533137.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有