周末在家没事，做了两个数据可视化的echarts图表，学到了很多有关echarts的知识点。现在总结一下，供各位同学一起学习，成长。
需求
图表的练习
图1-1
以上为图1-2
效果图
以上为 图2-1
图2-2
思路
分析需求图1-1
首先是需求图1-1. 是一个典型的双y轴，柱形图加折线图。可以使用这个案例来改造。
折柱混合
双y轴的话 主要是使用下面代码配置
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
对于图表中一些自定义的元素，如，右上角的二个元素，如下图3-1
这两个元素可以使用 echarts中的 graphic 的 elements 属性。
如下图 3-2时对 graphic 属性的简短解释。可以使用这个属性将一些图片，文本，圆，线，多面图，矩形，线，元素群组，添加到图表的指定位置。
此外由于该图表有二个产品，一个全部。所以使用的是dataset的数据源来存储图表的数据。
如下是全部产品的数据
const dataseSource = [
['product', '已交付', '累计百分比'],
['批次1', 850, 21],
['批次2', 1500, 36],
['批次3', 1800, 43],
['批次4', 2700, 65],
['批次5', 2600, 72],
['批次6', 2700, 85],
['下一批次', 3220, 80],
]
点击产品D，或产品E ，只要修改数据源，重新设置图表options就可以了。
此外还有一点，就是折线图的label属性是个动态值，大于50，字体变红，并增加一个警告图标。
此方案是这样实现的,主要是用 label中的rich 属性与 formatter属性.
rich 用于设置样式，就像为css中的class增加样式。
而 formatter 则可为不同的折线点，设置不用的样式。使用这种写法 {b| value} b为样式的名称，value为要显示的文本，或值。
{
name: '累计百分比',
type: 'line',
label: {
show: true,
distance: 5,
rich:{
red:{color:'red',fontSize:14},
b: {
backgroundColor: {
image: 'https://img-blog.csdnimg.cn/2021070312161116.png'
},
height: 30,
},
},
formatter: function(params) {
const { data } = params;
const value = data[2]
if (value > 50) {
return "{red|" + value + "%}{b| }"
}
return value+"%"
}
},
yAxisIndex: 1,
}
分析需求图1-2
需求图1-2 难点是在贴图的处理上。
由于是一个类目累加的柱状图，又称堆叠柱状图。因此可以基于该图例改造实现。
堆叠柱状图
堆叠柱状体 主要是在 series 中设置该属stack: 'total', 及可将同样设置stack: 'total' 的series 。堆积起来。
此外，该图例需要开始 贴图。不开启，设置了贴图是不会显示的。
aria: {
enabled: true,
decal: {
show: true,
}
}
设置蓝色的 已用产能 贴图。
itemStyle:{
decal:{
symbol: 'rect',
symbolSize: 1,
maxTileWidth:512,
maxTileHeight:512,
symbolKeepAspect: true,
dashArrayX: [1,0],
dashArrayY: [2,2],
color: '#5470c6',
// rotation: 0.5235987755982988
}
}
有关 属性decal 的更多解释 请看。
decal详细解释
代码
图1-1的核心代码
const allData = []
//[21,36,43,65,72,85,92]
// [850,1500,1800,2700,2600,2700,3220]
const proD = []
const proE = []
const dataseSource = [
['product', '已交付', '累计百分比'],
['批次1', 850, 21],
['批次2', 1500, 36],
['批次3', 1800, 43],
['批次4', 2700, 65],
['批次5', 2600, 72],
['批次6', 2700, 85],
['下一批次', 3220, 80],
]
option = {
color: ['#53f3f3', '#fff85f', '#EE6666'],
textStyle: {color: '#fff'},
backgroundColor: '#020403',//背景色
dataset: {
source: dataseSource,
},
graphic: {
elements: [
{
type: 'rect',
x: 120,
y: 10,
shape: {
width: 150,
height: 50
},
style: {
fill: 'rgba(255,255,255,.6)'
}
},
{
type: 'rect',
x: 320,
y: 10,
shape: {
width: 150,
height: 50
},
style: {
fill: 'rgba(255,255,255,.5)'
}
},
{
type: 'image',
style: {
image: 'data:i yf8A/9k=',
x: 325,
y: 15,
width: 40,
height: 40
},
onclick:function(data){
console.log(data)
}
},
{
type: 'text',
x: 180,
y: 20,
style: {
fill: '#000',
text: '9999',
font: 'bold 34px Microsoft YaHei',
},
onclick:function(data){
console.log(data)
console.log( arguments)
const { target} = data;
target.style.text = Math.floor(Math.random()*1000)+"";
}
},
{
type: 'text',
x: 380,
y: 20,
style: {
fill: '#000',
text: '12H',
font: 'bold 34px Microsoft YaHei',
}
},
{
type: 'image',
style: {
image: 'data:image/png; /9k=',
x: 125,
y: 15,
width: 40,
height: 40
}
},
{
type: 'group',
bottom: 20,
children: [
{type: 'image',style:{image:'dat A/9k'} },
{type: 'text', left:10, style: {
fill: '#fff85f',
text: '全部',
font: 'bold 34px Microsoft YaHei',}}
],
onclick:function(data){
console.log(data)
}
},
{
type: 'group',
bottom: 20,
left: 120,
children: [
{type: 'image',style:{image:'d 9k'} },
{type: 'text', style: {
fill: '#fff',
text: '产品D',
font: 'bold 34px Microsoft YaHei',}}
],
onclick:function(data){
console.log(data)
}
},
{
type: 'group',
bottom: 20,
left: 240,
children: [
{type: 'image',style:{image:' 9k'} },
{type: 'text', style: {
fill: '#fff',
text: '产品E',
font: 'bold 34px Microsoft YaHei',}}
],
onclick:function(data){
console.log(data)
}
},
]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
bottom: 20,
right:20,
textStyle:{color:'#fff'},
data: [
{name: '已交付',icon: 'circle'},
{name:'累计百分比',icon:'circle'}]
},
xAxis: [
{
type: 'category',
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
show:true,
name: '件',
min: 0,
max: 5000,
axisLine:{
show: true,
lineStyle:{
color: '#02180b'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#02180b',
}
}
},
{
type: 'value',
name: '',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}.00 %'
},
axisLine:{
show: true,
lineStyle:{
color: '#02180b'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#02180b',
}
}
}
],
series: [
{
name: '已交付',
type: 'bar',
barWidth: 20,
label: {
show: true,
position: 'top',
valueAnimation: true,
}
},
{
name: '累计百分比',
type: 'line',
label: {
show: true,
distance: 5,
rich:{
red:{color:'red',fontSize:14},
b: {
backgroundColor: {
image: 'https://img-blog.csdnimg.cn/2021070312161116.png'
},
height: 30,
},
},
formatter: function(params) {
const { data } = params;
const value = data[2]
if (value > 50) {
return "{red|" + value + "%}{b| }"
}
return value+"%"
}
},
yAxisIndex: 1,
}
]
};
图1-2的核心代码
option = {
// color: ['#5470c6', '#fac858'],
color: ['#fff', '#fff'],
legend: {
data: ['已用产能', '剩余产能']
},
xAxis: {
type: 'category',
data: ["制芯","组芯","熔炼","浇注","冷却","落砂","切割","抛丸","打磨","检测"]
},
yAxis: {
type: 'value',
axisLabel:{
formatter: '{value}%'
}
},
series: [
{
name: '已用产能',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter:'{c}%'
},
emphasis: {
focus: 'series'
},
data: [76,54,62,59,67,81,84,92,96,83],
itemStyle:{
....
}
},
{
name: '剩余产能',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter:'{c}%'
},
emphasis: {
focus: 'series'
},
data: [24,46,38,41,33,19,16,8,4,17],
itemStyle:{
decal:{
....
}
}
},
],
aria: {
enabled: true,
decal: {
show: true,
}
}
};
将代码复制到 echarts的编辑器里就可以实时预览效果了。
https://echarts.apache.org/examples/zh/editor.html?c=line-simple
后续的我会给大家详细讲解echarts中的贴花。 这是一个非常具有表现力，并且可以玩出花的特性。
大家敬请期待。
