实现echarts图表label标题颜色和它的数据项颜色一致

echarts目录

实现echarts图表label颜色和它的数据项颜色一致

---

文章目录

• echarts图表
• 前言
• 一、echarts图表是什么？
• 二、使用步骤
  • 1.引建一个普通的echarts图表
  • 2.代码展示
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

丰富的可视化类型：ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
几乎你想到的图表，ECharts都支持。

---

一、echarts是什么？

示例：Echarts是商业级数据表，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官方链接：echarts官网

二、使用步骤

1.源代码

代码如下（示例）：

// 饼图示例

HTML:

<!-- 饼图1 -->

                    <div class="pie1">

                        <div class="title">

                            全国教育热词TOP5

                        </div>

                        <div style="width: 100%;height: 80%;" id="pie1"></div>

                    </div>

JS:

var myChart = echarts.init(document.getElementById("pie1"));

var pieData = [

    {

        name: "中国梦",

        value: 700

    },

    {

        name: "幼儿园",

        value: 620

    },

    {

        name: "三胎",

        value: 540

    },

    {

        name: "双减",

        value: 480

    },

    {

        name: "新时代",

        value: 460

    }

]

// 步骤4：准备配置项,是对象，以键值对的形式出现

var option = {//饼图不需要配置x和y轴

    series: [

        {

            type: "pie",//指定图表类型为饼图

            data: pieData,

            // radius:"20%",//百分比是根据盒子的宽高中较小的一部分进行计算

            radius: ["35%", "60%"],//前一个是内圆半径，后一个是外圆半径

            roseType: "radius",//玫瑰饼图，南丁格尔图

            selectedMode: "single",//选中效果，使选中区域偏离圆心一小段距离，single或者multiple

            selectedOffset: 10,//偏离圆心的一小段距离

        },

       

    ]

}

原本展示图：

2.关键代码

1.不显示数据，只显示名称颜色变化

// 默认标签颜色不会跟数据项颜色保持一致，而是全都是黑色。想要实现label颜色和它的数据项颜色一致，需要手动继承颜色，设置

label:{ color: 'inherit'}

改变之后：

2.

//单个展示变化，数据颜色改变

            label: {

                // 这里定义了文本 百分比 是'value'样式的

                formatter: '{b}: {value|{d}}',

                rich: {

                    // 这个'value'样式表示文字颜色为白色

                    value: {

                       color: 'green',

                    }

                }

            },

图展示：

 3.//单个展示变化，名称颜色改变

label: {

                // 这样就实现了动态颜色，数据名固定为白色，百分比跟随数据项颜色

                formatter: '{name|{b}} {d}',

                rich: {

                    name: {

                       color: 'yellow',

                    }

                }

            }

图展示：

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了echarts的使用