I was free at home over the weekend. I made two echarts charts for data visualization and learned a lot about Echarts. Now sum up, for the students to learn together, grow up.
demand
1, Use dataset 2, summarize common configuration 3, React stack, TS language 4, component use ANTD
rendering
Train of thought
Analysis Requirements Figure 1-1
Firstly, demand Figure 1-1. It is a typical double Y-axis, bar chart and broken line chart. You can use this case to change it. Folding column mixed double y axis is mainly configured using the following code
yAxis: [
{
type: 'value'.name: 'water'.min: 0.max: 250.interval: 50.axisLabel: {
formatter: '{value} ml'}}, {type: 'value'.name: 'temperature'.min: 0.max: 25.interval: 5.axisLabel: {
formatter: '{value} ° C'}}].Copy the codeFor some custom elements in the diagram, for example, the two elements in the upper right corner, see Figure 3-1 below
graphic 的 elementsProperties. As shown in Figure 3-2graphicA short explanation of the property. You can use this property to add images, text, circles, lines, polyhedral diagrams, rectangles, lines, and groups of elements to the specified position on a diagram.
The following is the data of all products
const dataseSource = [
['product'.'Delivered'.'Cumulative percentage'],
['batch 1'.850.21],
['batch 2'.1500.36],
['batch 3'.1800.43],
['batch 4'.2700.65],
['batch 5'.2600.72],
['batch 6'.2700.85],
['Next batch'.3220.80]]Copy the codeClick on product D, or product E, and simply modify the data source and reset the chart options.
In addition, the label attribute of the line chart is a dynamic value, greater than 50, with the font turning red and adding a warning icon. This scheme is implemented by using the rich and formatter properties in label. Rich is used to set styles, just like adding styles to classes in CSS. Formatter, on the other hand, sets different styles for different creases. Use this writing value} {b | b for the style, the name of the value to display text, or value.
{
name: 'Cumulative percentage'.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,}Copy the codeAnalysis Requirements Figure 1-2
Requirements FIG. 1-2 The difficulty lies in the processing of texture. It is also called a stacked histogram because it is a column chart of category accumulation. Therefore, it can be realized based on the legend transformation. Stack columns mainly set the genus stack: ‘total’ in series, and can also set stack: ‘total’ in series. Pile it up. In addition, the legend needs to start mapping. If not enabled, maps will not be displayed.
aria: {
enabled: true.decal: {
show: true,}}Copy the codeSet the used capacity map in blue.
itemStyle:{
decal: {symbol: 'rect'.symbolSize: 1.maxTileWidth:512.maxTileHeight:512.symbolKeepAspect: true.dashArrayX: [1.0].dashArrayY: [2.2].color: '#5470c6'./ / rotation: 0.5235987755982988}}Copy the codeThe attributesdecalFor more explanation, see.Decal explains
code
Figure 1-1 shows the core code
const allData = []
/ /,36,43,65,72,85,92 [21]
/ / [0] 850150 0180 0270 0260 0270 0322
const proD = []
const proE = []
const dataseSource = [
['product'.'Delivered'.'Cumulative percentage'],
['batch 1'.850.21],
['batch 2'.1500.36],
['batch 3'.1800.43],
['batch 4'.2700.65],
['batch 5'.2600.72],
['batch 6'.2700.85],
['Next batch'.3220.80],
]
option = {
color: ['#53f3f3'.'#fff85f'.'#EE6666'].textStyle: {color: '#fff'},
backgroundColor: '# 020403'./ / the background color
dataset: {
source: dataseSource,
},
graphic: {
elements: [{type: 'rect'.x: 120.y: 10.shape: {
width: 150.height: 50
},
style: {
fill: 'rgba (255255255, 6)}}, {type: 'rect'.x: 320.y: 10.shape: {
width: 150.height: 50
},
style: {
fill: 'rgba (255255255, 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: 'all'.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 products'.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 'products'.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: 'Delivered'.icon: 'circle'},
{name:'Cumulative percentage'.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: 'Delivered'.type: 'bar'.barWidth: 20.label: {
show: true.position: 'top'.valueAnimation: true,}}, {name: 'Cumulative percentage'.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,}};Copy the codeFigure 1-2 shows the core code
option = {
// color: ['#5470c6', '#fac858'],
color: ['#fff'.'#fff'].legend: {
data: ['Used capacity'.'Surplus capacity']},xAxis: {
type: 'category'.data: ["Core"."Core"."Melting"."Casting"."Cool"."Sand"."Cut"."Shot"."Polished"."Test"]},yAxis: {
type: 'value'.axisLabel: {formatter: '{value}%'}},series: [{name: 'Used capacity'.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: 'Surplus capacity'.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}}};Copy the codeCopy the code to the Echarts editor for a live preview. Echarts.apache.org/examples/zh…
I’ll explain decals in echarts in more detail later on. This is a very expressive, playable trait. Stay tuned.