Sxd0208
Sxd0208
采纳率51.2%
2017-02-23 10:37

echarts的图例的图形的颜色怎么改变?

5
已采纳

echarts的图例的图形的颜色怎么改变?我的一直是灰色的 然后hover滑过时 就变成了和
下面柱形图一直的颜色;我不需要hover,只需要它没有hover的时候也和柱形图的颜色保持一致
图片说明
图片说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts-all.js"></script>
    <style>
        .aaa{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="aaa" id="annular"></div>
<script>
    var aaa = echarts.init(document.getElementById('annular'));
    option = {
        title: {
            x: 'center',
            text: 'ECharts例子个数统计'
        },
        tooltip: {
            trigger: 'item'
        },
        legend:{
            //selectedMode: false,
            x:'right',
            y:70,
            align:'right',
            itemWidth:16,
            itemGap:20,
            orient:'vertical',
            data:[{name:'消费贷',textStyle:{color:'#C1232B'}},
                   {name:'现金贷',textStyle:{color:'#B5C334'}},
                   {name:'教育贷',textStyle:{color:'#FCCE10'}}
            ],
            selected:{
                '消费贷':true,
                '现金贷':true,
                '教育贷':true
            }
        },
        color:['#C1232B','#B5C334','#FCCE10'],
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['消费贷', '现金贷', '教育贷']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: 'ECharts例子个数统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [12,21,10],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)'
                    },
                    data: [
                        {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol:'none'},
                        {xAxis:1, y: 350, name:'Bar', symbolSize:20,symbol:'none'},
                        {xAxis:2, y: 350, name:'Scatter', symbolSize:20,symbol:'none'}
                    ]
                }
            }
        ]
    };
    aaa.setOption(option);
</script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • qq_29594393 当作看不见 4年前

    先和你说一下问题在哪里吧 ,系统默认就是legend的颜色和条形的颜色一样的,不过前提条件是你的series 数据的name 属性和legend的 data数组一一对应.这里你的series 只有一个数组 ,需要分成三列才能正确的显示legend ,所以你这个配置有一些问题 ,如果真的想按自己的方式生成图形的话,有一个
    D3.js提供一个工具集,可以自己自由绘制图形.

    option = {
            title: { x: 'center', text: 'ECharts例子个数统计' },
            tooltip: { trigger: 'item' },
            legend: {
                selectedMode: false,
                orient: 'vertical',
                data: ['消费贷','现金贷','教育贷'],
            },
            color: ['#C1232B', '#B5C334', '#FCCE10'],
            toolbox: {
                show: true,
                feature: {
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            grid: { borderWidth: 0, y: 80, y2: 60 },
            xAxis: [
            { type: 'category',
            show: false,
            data: ['消费贷', '现金贷', '教育贷'] }],
            yAxis: [{ type: 'value', show: false }],
            series: [{
                name: '消费贷',
                type: 'bar',
                barWidth:40,
                itemStyle: {
                    normal: {
                        color: function(params) { // build a color map as your need. 
                            var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                            return colorList[params.dataIndex]
                        },
                        label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                    }
                },
                data: [12,null,null],
                markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
            },{
                name: '现金贷',
                type: 'bar',
                barWidth:40,
                itemStyle: {
                    normal: {
                        color: function(params) { // build a color map as your need. 
                            var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                            return colorList[params.dataIndex]
                        },
                        label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                    }
                },
                data: [null, 21, ],
                markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
            },
            {
                name: '教育贷',
                type: 'bar',
                barWidth:40,
                itemStyle: {
                    normal: {
                        color: function(params) { // build a color map as your need. 
                            var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                            return colorList[params.dataIndex]
                        },
                        label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                    }
                },
                data: [null,null, 10],
                markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
            }
            ]
        };
    
    点赞 1 评论 复制链接分享
  • a464587444 wooden_fish丶 4年前

    试着把你的series拆一下

     series: [
                {
                    name: '消费贷',
                    type: 'bar',
                    data: [12]
                },
                {
                    name: '现金贷',
                    type: 'bar',
                    data: [21]
                },
                {
                    name: '教育贷',
                    type: 'bar',
                    data: [10]
                }
            ]
    
    点赞 1 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 4年前
  • a464587444 wooden_fish丶 4年前

    难道legend不是默认和柱状图对应的颜色一样?
    把你这段echarts配置的代码贴出来吧,不然也不好找问题

    点赞 评论 复制链接分享
  • qq_29594393 当作看不见 4年前

    你的图呢??你说的图例是指哪个? tooltip? bar? 还是其他的

    点赞 评论 复制链接分享
  • qq_37495601 qq_37495601 3年前

    series 数据的name 属性和legend的 data数组要一一对应!!!我就是没有对应上name。

    点赞 评论 复制链接分享

相关推荐