ECharts图表中修改每个category的颜色

要修改每个类别的显示颜色,需要给每个数据项配置
具体方法为:在series里面给data数组的每个元素设置itemSytle就可以了

var myTestCharts = echarts.init(document.getElementById('myTest'));

option如下:

myOption = {
    title : {
        text: '场馆内各类人数量'
    },
    tooltip : {
        trigger: 'axis'
    },
    xAxis : [
        {
            type : 'value',
          axisLabel : {
                formatter: '{value} 人'
            }
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['男人','女人','老人','小孩']
        }
    ],
    series : [
        {
            type:'bar',
          data:[
              {
                value:70,
                itemStyle:{
                  normal:{color:'blue'}
              }
              }, 
              {
                value:45,
                itemStyle:{
                  normal:{color:'purple'}
              }
              },
              {
                value:16,
                itemStyle:{
                  normal:{color:'yellow'}
              }
              },
              {
                value:91,
                itemStyle:{
                  normal:{color:'red'}
              }
              }
            ]
        }
    ]
};

将图表显示出来:

    myTestCharts.setOption(myOption);

效果图:
这里写图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ECharts是一个基于JavaScript的开源可视化库,它提供了各种类型的图表,如折线图、柱状图、饼图等等。实现多个折线图和柱状图混合的方法如下: 1. 定义一个包含多个数据系列的option对象,每个数据系列对应一个折线图或柱状图。 2. 在option对象定义x轴和y轴的数据,以及图表的样式、标题等属性。 3. 使用ECharts的实例化对象将option对象传入,并将图表渲染到指定的DOM元素。 以下是一个示例代码,实现了两个折线图和一个柱状图混合显示: ```javascript // 定义数据 var data1 = [10, 20, 30, 40, 50, 60]; var data2 = [15, 25, 35, 45, 55, 65]; var data3 = [8, 18, 28, 38, 48, 58]; // 定义option对象 var option = { legend: { data: ['折线图1', '折线图2', '柱状图'] }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六'] }, yAxis: [ { type: 'value', name: '折线图1', axisLabel: { formatter: '{value} °C' } }, { type: 'value', name: '折线图2', axisLabel: { formatter: '{value} %' } }, { type: 'value', name: '柱状图', axisLabel: { formatter: '{value} 个' } } ], series: [ { name: '折线图1', type: 'line', data: data1 }, { name: '折线图2', type: 'line', yAxisIndex: 1, data: data2 }, { name: '柱状图', type: 'bar', yAxisIndex: 2, data: data3 } ] }; // 实例化ECharts对象 var myChart = echarts.init(document.getElementById('chart')); // 渲染图表 myChart.setOption(option); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kirinlau

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值