echarts样式的配置

直接样式：itemStyle、textStyle、lineStyle、areaStyle、label

高亮样式：在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label

注意：这些样式的优先级高，会覆盖主题中、调色盘的效果

 <script src="lib/echarts.min.js"></script>

<body>
    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '这是个饼图',
                // 控制标题的文字样式
                textStyle: {
                    color: 'blue'
                }
            },
            series: [{
                type: 'pie',
                data: [{
                        value: 22673,
                        name: "京东",
                        // 控制某个区域的样式
                        itemStyle: {
                            color: 'pink'
                        },
                        // 控制某个区域文字的颜色
                        label: {
                            color: 'green'
                        },
                        // 进行高亮配置，鼠标移过去就会发生变化
                        emphasis: {
                            itemStyle: {
                                color: 'red'
                            },
                            label: {
                                color: 'black'
                            },
                        }
                    },
                    {
                        value: 6123,
                        name: "唯品会",
                    },
                    {
                        value: 8989,
                        name: "1号店"
                    },
                    {
                        value: 6700,
                        name: "聚美优品"
                    }
                ]
            }]
        }
        myChart.setOption(option);
    </script>

如图：

posted on 2020-12-28 17:19 稳住别慌阅读(399) 评论(0) 编辑收藏举报