echarts柱状图图例拖动颜色设置

最新推荐文章于 2024-03-27 22:07:19 发布

m_cy

最新推荐文章于 2024-03-27 22:07:19 发布

阅读量400

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_46918406/article/details/129700747

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例',
				left: 'center'
            },
			tooltip: {
						show: true
					},
			toolbox: { // 工具盒
                    show: true,
                    feature: { // 工具
                        saveAsImage: { // 保存图片
                            type: "png"
                        },
                        restore: { // 复原
                            show: true
                        }
                    }
                },

          
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '总数',
                type: 'bar',
				itemStyle: {
						normal: {
							color: function(params) {
								// 给出颜色组
								var colorList = ['#cca272', '#74608f', '#d7a02b', '#c8ba23', '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];
                                //循环调用
								return colorList[params.dataIndex%colorList.length]
							},
							label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
						}
					},
                data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20],
				
            }],
			dataZoom: [
                    {   // 这个dataZoom组件，默认控制x轴。
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 0,      // 左边在 10% 的位置。
                        end: 40        // 右边在 60% 的位置。
                    }
                ],
			
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

m_cy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts柱状图图例拖动颜色设置

/ 这个 dataZoom 组件是 slider 型 dataZoom 组件。// 基于准备好的dom，初始化echarts实例。// 这个dataZoom组件，默认控制x轴。// 使用刚指定的配置项和数据显示图表。'第一个 ECharts 实例'// 左边在 10% 的位置。// 右边在 60% 的位置。// 指定图表的配置项和数据。
复制链接

扫一扫