m0_46075468 2023-10-31 11:12 采纳率: 89.3%
浏览 11

echart怎么实现柱体文本域颜色不同

如下代码怎么让柱子上的文本域每个颜色都不一样，目前都是绿色


<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript" src="echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      title: {
        text: 'Waterfall Chart',//主标题文本超链接
        subtext: 'Living Expenses in Shenzhen'//副标题文本超链接。
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'//指示器类型 阴影指示器
        },
        formatter: function (params) {
          var tar = params[1];
          return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        }
      },
      grid: {
        left: '3%',//grid 组件离容器左侧的距离。
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        splitLine: { show: false },
        data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
      },
      yAxis: {
        show: false
        // type: 'value'
      },
      series: [
        {
          name: 'Placeholder',
          type: 'bar',
          stack: 'Total',
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent', // 红色
            // borderRadius: [0, 20, 20, 0],
          },
          emphasis: {
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            }
          },
          data: [0, 1700, 1400, 1200, 300, 0]
        },
        {
          name: 'Life Cost',
          type: 'bar',
          stack: 'Total',
          label: {
            show: true,
            position: 'inside',
            color: 'black', // 黑色
            fontWeight: 'bold',
            textStyle: {
              width: 70, // 设置宽度
              height: 30 // 设置高度
            },
            backgroundColor: 'rgba(9,255,6,255)' ,// 设置为黑色半透明背景
            //   backgroundColor : function(params){
            //     var colorList =['#9df5s4','#c9a665','#d48265','#61a0a8','#2f4554','#c23531'];
            //   return colorList[params.dataIndex];
            // }
            //borderColor: 'red',
            //   rich:{
            //   width:'50%',
            //   height:'50%',},
          },
          itemStyle: {
            borderRadius: [10, 10, 10, 10],// 设置圆角
            color: function (params) {
              var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#c9a665', '#9df5s4'];
              return colorList[params.dataIndex];
            }

          },
          data: [2900, 1200, 300, 200, 900, 300]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • 醉酒的戈多 2023-10-31 14:15
    关注
    
 
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
 
<head>
  <meta charset="utf-8">
</head>
 
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
 
 
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
 
  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
 
    var option;
 
    option = {
      title: {
        text: 'Waterfall Chart',//主标题文本超链接
        subtext: 'Living Expenses in Shenzhen'//副标题文本超链接。
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'//指示器类型 阴影指示器
        },
        formatter: function (params) {
          var tar = params[1];
          return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        }
      },
      grid: {
        left: '3%',//grid 组件离容器左侧的距离。
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        splitLine: { show: false },
        data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
      },
      yAxis: {
        show: false
        // type: 'value'
      },
      series: [
        {
          name: 'Placeholder',
          type: 'bar',
          stack: 'Total',
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent', // 红色
            // borderRadius: [0, 20, 20, 0],
          },
          emphasis: {
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            }
          },
          data: [0, 1700, 1400, 1200, 300, 0]
        },
        {
          name: 'Life Cost',
          type: 'bar',
          stack: 'Total',
          label: {
            show: true,
            position: 'inside',
            color: 'black', // 黑色
            fontWeight: 'bold',
            formatter: function (params){
              if (params.value > 500){
                return '{a|'+ params.value +'}'
              } else {
                return '{b|'+ params.value +'}'
              }
            },
            rich: {
              a: {
                width: 70, // 设置宽度
                height: 30, // 设置高度
                backgroundColor: 'green' ,
                textAlign: 'center'
                },
              b: {
                width: 70, // 设置宽度
                height: 30, // 设置高度
                backgroundColor: 'red' ,
              }
            }
          },
          itemStyle: {
            borderRadius: [10, 10, 10, 10],// 设置圆角
            color: function (params) {
              var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#c9a665', '#9df5s4'];
              return colorList[params.dataIndex];
            }
 
          },
          data: [2900, 1200, 300, 200, 900, 300]
        }
      ]
    };
 
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
 
    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 10月31日

悬赏问题

  • ¥15 用js遍历数据并对非空元素添加css样式
  • ¥15 使用autodl云训练，希望有直接运行的代码(关键词-数据集)
  • ¥50 python写segy数据出错
  • ¥20 关于线性结构的问题：希望能从头到尾完整地帮我改一下，困扰我很久了
  • ¥30 3D多模态医疗数据集-视觉问答
  • ¥20 设计一个二极管稳压值检测电路
  • ¥15 内网办公电脑进行向日葵
  • ¥15 如何输入双曲线的参数a然后画出双曲线？我输入处理函数加上后就没有用了，不知道怎么回事去掉后双曲线可以画出来
  • ¥15 soildworks装配体的尺寸问题
  • ¥100 有偿寻云闪付SDK转URL技术