echarts之样式

样式

直接样式

itemStyle、textStyle、lineStyle、areaStyle、label

高亮样式

在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label

注意：优先级高，会覆盖主题中、调色盘的中样式，这里也会遵循就近原则。

demo:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>饼图</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>

<!--2。准备一个呈现图表的盒子-->
<div style="width: 600px;height: 400px"></div>

<script>
    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    //就是需要设置给饼图的数据
    var pieData = [{value: 11231, name: "淘宝",}, {value: 22673, name: "京东"}, {value: 6123, name: "唯品会"},
        {value: 8989, name: "1号店"}, {value: 6700, name: "聚美优品"}]
    //4。准备配置项
    var option = {
        title: {
            text: "饼图的测试",
            //控制标题的文字样式
            textStyle: {
                color: 'red'
            }

        },
        series: [
            {
                type: 'pie',
                data: [{
                    value: 11231,
                    name: "淘宝",
                    // 控制这一区域的样式
                    itemStyle: {
                        color: 'yellow'
                    },
                    //设置文字的样式
                    label: {
                        color: 'green'
                    },
                    //高亮颜色
                    emphasis:{
                        itemStyle: {
                            color: 'pink'
                        },
                        label: {
                            color: 'black'
                        },
                    }
                },
                    {
                        value: 22673,
                        name: "京东"
                    },
                    {
                        value: 6123,
                        name: "唯品会",
                    },
                    {
                        value: 8989,
                        name: "1号店"
                    },
                    {
                        value: 6700,
                        name: "聚美优品"
                    }]
            }
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);
</script>
</body>
</html>
posted @ 2022-08-10 00:15  King-DA  阅读(247)  评论(0)    收藏  举报