EChart根据值大小展示不同渐变色

最新推荐文章于 2024-02-21 14:19:09 发布

图灵晚辈

最新推荐文章于 2024-02-21 14:19:09 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： echarts html js

本文链接：https://blog.csdn.net/weixin_45991188/article/details/111831688

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>风格2</title>
	<script src="echarts.min.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:600px;"></div>
</body>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 
		},
        
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['易方达F上证sofff', '永赢创业板指数', '招商财经天数据策略F', '德邦民裕进取量化精锐A', '建信中证红利潜力指数A', '易方达F上证sofff联接O', '景顺长城中证沪深红利成长A','永赢创业指板数','易方达F上证sofff联接A','景顺长城中证沪深红利成长O'],
            axisTick: {
                alignWithLabel: true
			},
			axisLabel: {
				interval: 0,
				rotate: 270, //旋转角度
                fontSize: 24, // 字体大小
                // formatter: function(value) {
                //     return value.split('').join('\n') //把值竖直起来
                // }
			}
        }
    ],
    yAxis: [
        {
			type: 'value',
			axisLabel: {
				show: true,
				interval: 'auto',
				formatter: '{value}%',
                fontSize: 20, // 字体大小
			},
			show: true
        }
    ],
    series: [
        {
            type: 'bar',
            barWidth: '60%',
            data: [-27.66,26.71,26.38,26.36,25.59,23.86,22.34,21.64,21.15,-10.94],
            itemStyle: {
				normal: {
					color: function (params) {
						console.log(params,'params')
                        if (params.value > 0) {
							return params.color = {
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#942E2E' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#FD4343' // 100% 处的颜色
                                }],
                                global: false, // 缺省为 false
                            }
						}
                        if (params.value < 0) {
							return params.color = {
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#13CC67' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#0B733A' // 100% 处的颜色
                                }],
                                global: false, // 缺省为 false
                            }
						}
					},
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							fontSize: 16,
                            color:'black'
						},
						// 显示值过滤保留一位小数
						formatter: function (params) {
							return (params.value).toFixed(1) + '%';
						}
					},
				},
            },
        }
    ]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
</html>