echarts目录
实现echarts图表label颜色和它的数据项颜色一致
前言
提示:这里可以添加本文要记录的大概内容:
丰富的可视化类型: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的使用