echarts做曲线图 超过范围颜色不一样的设定


test3:function () {
    let myChart = echarts.init(document.getElementById('echart3'));
    let date = new Date();
    testEcharts({createDate:date}).then(function (rsp) {
        console.log(rsp)
        let y = rsp.data;

        myChart.setOption({
            title: {
                text: '一天用电量分布',
                padding: 3,
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bolder',
                    color: '#ff0000'          // 主标题文字颜色
                },
                subtextStyle: {
                    color: '#aaa'          // 副标题文字颜色
                }
            },
            tooltip: {//悬浮提示框
                showDelay: 20,
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {//下载
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis:  {//X                name:'时间轴',
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:15', '02:30', '03:45']
            },
            yAxis: {//Y                name:'用电量',
                type: 'value',
                axisLabel: {
                    formatter: '{value} W'
                },
                axisPointer: {
                    snap: true
                }
            },
            visualMap: {//区间内控制显示颜色
                show: false,
                dimension: 1,
                pieces: [{gte: 7, lte: 15, color: 'green'}],
                outOfRange: {
                    color: 'red'
                }
            },
            series: [
                {
                    name:'用电量',
                    type:'line',
                    smooth: true,
                    data: y,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name:'下限',
                    type:'line',
                    data:[7],
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                },
                {
                    name:'上限',
                    type:'line',
                    data:[15],
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ],
        });
    });
}

参考

https://blog.csdn.net/a_leading/article/details/77891530

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以通过设置每个柱子的颜色来实现echarts柱状图每个柱颜色不一样的效果。具体方法是在series中设置itemStyle属性,然后在itemStyle中设置color属性,将每个柱子的颜色设置为不同的值即可。例如: ``` series: [{ type: 'bar', data: [10, 20, 30, 40, 50], itemStyle: { color: function(params) { var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae']; return colorList[params.dataIndex]; } } }] ``` 以上代码中,colorList数组中存储了5种不同的颜色,然后在itemStyle的color属性中通过函数返回对应柱子的颜色值,params.dataIndex表示当前柱子的索引。这样就可以实现每个柱颜色不一样的效果了。 ### 回答2: Echarts是一种非常流行的数据可视化工具,可以用来创建各种类型的图表,包括柱状图。在Echarts中,柱状图的每个柱子的颜色可以通过设置系列(series)的颜色属性来改变。以下是实现方法及相关解释: 1.确定数据集 首先,需要确定柱状图所需的数据集。具体来说,需要提供每个柱子所代表的数据值,以及每个柱子所对应的类别标签(如“产品A”、“产品B”、“产品C”等)。 2.创造Echarts实例 然后,需要在HTML页面中创建一个Echarts实例,在其中设置图表的基本样式,如标题、坐标轴、图例等。 3.配置颜色 就柱状图如何实现颜色差异而言,要设置系列(series)的颜色属性。可以在Echarts实例中指定一个颜色数组,其中包含应用于所有系列(series)的颜色值。在柱状图中,每个柱子将按照该数组中的颜色顺序叠加各自的颜色值。 若要为所有系列(series)设置相同的颜色,则可以使用以下代码: ``` series: [ { name: '数据名称', type: 'bar', data: [10, 20, 30, 40, 50], itemStyle: { normal: { color: '#d48265' } } } ] ``` 在以上代码中,可以使用itemStyle属性来指定每个柱子的样式,包括颜色、透明度等。在normal中设置color属性即可化相应的颜色值。 若要为每个系列(series)设置不同的颜色,则可以在颜色数组中依次为每个系列设置不同的颜色值。具体代码如下: ``` series: [ { name: '产品A', type: 'bar', data: [10, 20, 30, 40, 50], itemStyle: { normal: { color: '#d48265' } } }, { name: '产品B', type: 'bar', data: [20, 30, 40, 50, 60], itemStyle: { normal: { color: '#91c7ae' } } }, { name: '产品C', type: 'bar', data: [30, 40, 50, 60, 70], itemStyle: { normal: { color: '#749f83' } } } ] ``` 以上代码中,为每个系列指定了不同的颜色值。在图表中,每个柱子将按照颜色数组中的颜色顺序叠加颜色值。可以根据实际需求来确定系列数量及相应的颜色值。 总之,Echarts柱状图每个柱颜色不一样的实现方法并不困难,只需要在配置系列(series)时设置好各个颜色属性即可。 ### 回答3: Echarts是一款基于JavaScript的开源可视化库,它提供了丰富的图表类型和可定制的细节,可以帮助开发者更加简单、快速地呈现数据图表。 在Echarts中,实现每个柱状图颜色不一样的方法有很多,下面介绍两种常用的方法: 方法一:使用visualMap组件 在Echarts中,visualMap是常用的展示数据范围颜色对应关系的组件。我们可以通过visualMap的color属性,来实现每个柱颜色不一样的效果。 首先,在Echarts的options中,我们需要加入一个visualMap组件: ``` visualMap: { type: 'piecewise', pieces: [ {min: 0, max: 1000, color: 'red'}, {min: 1000, max: 2000, color: 'orange'}, {min: 2000, max: 3000, color: 'yellow'}, {min: 3000, max: 4000, color: 'green'}, {min: 4000, max: 5000, color: 'blue'} ], dimension: 1 } ``` 在这个visualMap组件中,我们将数据范围分割成了5个段落,每个段落对应着一个颜色,分别为红色、橙色、黄色、绿色和蓝色。 接下来,在Echarts的series中,我们需要加入一个bar图表,并设置柱形颜色为visualMap: ``` { type: 'bar', data: [1200, 3000, 1500, 2000, 2500], itemStyle: { normal: { color: function(params) { return echarts.color.gradient('#FFFFFF', params.dataIndex / 4, params.dataIndex / 4 + 0.25); } } }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } } ``` 在这个bar图表中,我们设置了itemStyle.normal.color属性为一个函数,该函数的两个参数分别为params和params.dataIndex,params表示当前数据的名称和值等信息,params.dataIndex表示当前数据的序号。 在color函数中,我们使用了Echarts提供的渐变函数echarts.color.gradient,将柱形颜色根据柱形序号从visualMap中取出。 方法二:使用渐变色 另一种常用的方法是使用渐变色来实现每个柱颜色不一样的效果。 在Echarts中,我们可以设置itemStyle.normal.color属性为一个数组,该数组表示一个渐变色。 ``` { type: 'bar', data: [1200, 3000, 1500, 2000, 2500], itemStyle: { normal: { color: function(params) { var colorList = [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: 'red'}, {offset: 0.5, color: 'yellow'}, {offset: 1, color: 'blue'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: 'yellow'}, {offset: 0.5, color: 'green'}, {offset: 1, color: 'cyan'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: 'green'}, {offset: 0.5, color: 'blue'}, {offset: 1, color: 'magenta'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: 'blue'}, {offset: 0.5, color: 'orange'}, {offset: 1, color: '#FFC0CB'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: 'orange'}, {offset: 0.5, color: '#FFC0CB'}, {offset: 1, color: 'green'} ]) ]; return colorList[params.dataIndex % colorList.length]; } } }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } } ``` 在这个bar图表中,我们设置了itemStyle.normal.color属性为一个函数,该函数的两个参数分别为params和params.dataIndex,params表示当前数据的名称和值等信息,params.dataIndex表示当前数据的序号。 在color函数中,我们用一个数组colorList来存储多组渐变色,然后根据params.dataIndex取得数组中的某一组渐变色并返回。 通过上述两种方法,我们可以轻松实现Echarts柱状图每个柱颜色不一样。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值