💪~ If you like it, you can like it or leave a comment 💕~~~, thank you ⭐️ 💕 ️~~
1. Echars bar chart stacking graphics
The code is as follows:
mychart2() {
myChart2 = echarts.init(document.getElementById('profitTrends'));
var data = {
area: ['2020Q3'.'2020Q4'.'2121Q1'.'2121Q2'.'2121Q3'].legend: ['Big decision'.'Appointment and removal of Important Personnel'.'Major Projects arrangement'.'Large capital operation'].data: [[808.745.773.805.258],
[74.59.71.76.30],
[152.99.69.111.36],
[42.39.26.46.13]]}var colors = ['#02BCD0'.'#0780EB'.'#9A86FF'.'#CA5670']
option = {
color: colors,
legend: {
top:'86%'.left:'25%'.icon:"rect".selectedMode:false.// Cancel the click event on the legend
itemWidth:15.itemHeight:3.textStyle: {
color: '#fff'.fontSize: 12.padding: [0.15.0.5]},data: data.legend
},
tooltip: {
transitionDuration: 0.trigger: 'axis'.axisPointer: {
// type: 'shadow',
type: 'none'}},grid: {
left: '15%'.top: '25%'.right: '8%'.bottom: '38%',},xAxis: {
type: 'category'.axisLabel: {
show: true.interval:0.rotate:40.textStyle: {
color:"#ffffff".fontSize: 12}},axisLine: {
show: true.lineStyle: {
color: "rgba(12, 87, 169, 1)".type:"dotted"
},
width: 5
},
axisTick: {
show: false,},data: data.area
},
yAxis: {
type: 'value'.interval:200.axisLabel: {
formatter: '{value}'.color: '#ffffff'.textStyle: {
fontSize: 12.color: '#ffffff',}},axisLine: {
show: true.lineStyle: {
color: "rgba(12, 87, 169, 1)"
},
width: 5
},
axisTick: {
show: false,},splitLine: {
show:true.lineStyle: {color:'rgba(12, 79, 129, 1)'.type:"dotted"}}},series: []};for (var i = 0; i < data.legend.length; i++) {
option.series.push({
name: data.legend[i],
type: 'bar'.stack: 'total'.barWidth: '25'.label: {
show: false.position: 'insideRight'
},
data: data.data[i]
})
}
myChart2.setOption(option);
}
Copy the code2. Percentage of Echars circle graph
The code is as follows :(the Angle needs to be calculated by ourselves, if it is 100% circle, averagenum is not needed, and the value can be directly written)
function mychart3() {var averagenum=50.22; myChart3=echarts.init(document.getElementById('profitIncome'));
option = {
var pass_rate = 70,average = averagenum*0.7,total = 100; // 360*70%=252 degrees 252/360=0.7
let option = {
series: [{name:'Pass rate'+pass_rate+The '%'.type:'pie'.radius: ['52%'.'54%'].// Disable mouse hover zooming
hoverAnimation: false.silent: true.// The position of the ring
label: {
show: false.position: 'center',},labelLine: {
normal: {
show: false}},data:[
{
value:pass_rate, // The data to display
// name: 'passrate '+pass_rate+'%',
itemStyle: {
normal: {
color:'#008AD4',}}}, {value:total-pass_rate,
// Do not need to display data, the color is set to the same as the background
itemStyle: {
normal: {
color: 'transparent'}}}]}, {name:'Average'+average+The '%'.type:'pie'.// roundCap: true,
radius: ['48%'.'52%'].hoverAnimation: false.silent: true.label: {
show: false.position: 'center',},labelLine: {
normal: {
show: false}},data:[
{
// name:' average '+ '%',
value:average,
itemStyle: {
normal: {
color: {
// The color of the completed ring
colorStops: [{offset: 0.color: "#2449F3" // The color at 0%
},
{
offset: 1.color: "#7493F8" // Color at 100%}]},}}, {value:total-average,
itemStyle: {
normal: {
color: 'transparent'}}}],},]}; } myChart3.setOption(option); }Copy the code3. Echarts bar chart
The code is as follows:
function mychart3() {
myChart3 = echarts.init(document.getElementById('profitIncome'));
var xData = ["Territory"."Outside"]
var line = ["2942"."1834"];
var attr ={
'name':'Average monthly Unit price'.'unit':'Yuan/order'
}
var max =Math.max.apply(null,line);
var maxnum=max+1000;
// console.log(maxnum)
var colors = []
option = {
// tooltip: {
// trigger: 'item',
// padding: 1,
// formatter: function(param) {
// var resultTooltip =
/ / "< div style = 'background: rgba (13,5,30. 6); Border: 1 px solid rgba (255255255, 2); padding:5px; border-radius:3px; '> "+
// "
" + param.name + "
" +
// "
"+
// " " +attr.name + ": " +
// "" + param.value + "" + attr.unit + ""+
// "" +
// "";
// return resultTooltip
/ /}
// },
grid: {
left: '15%'.top: '20%'.right: '8%'.bottom: '25%',},legend: {
show: true.icon: 'circle'.orient: 'horizontal'.top: '90.5%'.right: 'center'.itemWidth: 16.5.itemHeight: 6.// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: '#C9C8CD'.fontSize: 14}},xAxis: [{
// show:false,
data: ["Territory"."Outside"].triggerEvent:true.// Set the coordinate click event
axisLabel: {
color: '#77C8FF'.fontSize: 12.height:40.lineHeight:40
},
axisLine: {
show: false // Do not display the X-axis
},
axisTick: {
show: false // Do not display the scale
},
boundaryGap: true.splitLine: {
show: false.width: 0.08.lineStyle: {
type: "solid".color: "#03202E"}}}].yAxis: [{
// max: maxnum,
splitLine: {
show: true.lineStyle: {
color: '#0C57A9'.type: 'dotted'}},axisTick: {
show: false
},
axisLine: {
show: true.lineStyle: {color:"#2A6FDA".type:"dotted".width:'2'}},axisLabel: {
color: '#4F88BD'.fontSize: 12.textStyle: {
// color: '#888'}},},series: [{// Column bottom wafer
name: "".type: "pictorialBar".symbolSize: [46.10].// Adjust the shape of the section
symbolOffset: [0.5].z: 12.itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0.2);
if(a === '境内') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: "Rgba (21, 106, 199, 0.4)"}, {offset: 1.color: "rgba(55, 130, 211, .5)"}].false)}else if(a === 'outside') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: 'rgba(0, 203, 159, 0)' // The color at 0%
}, {
offset: 1.color: 'rgba (0, 203, 159, 0.7)'// Color at 100%}].false)}},label: {show:true.position:'top'.padding: [0.0.5.0].backgroundColor:"transparent".color:"#77C8FF"}},},data: line
},
/ / cylinder
{
name: ' '.type: 'bar'.barWidth: 46.barGap: '0%'.itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0.2);
if(a === '境内') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: "rgba(33, 109, 196, 1)"}, {offset: 1.color: "Rgba (29, 95, 176, 0.3)"}].false)}else if(a === 'outside') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: 'rgba(0, 203, 159, 1)' // The color at 0%
}, {
offset: 1.color: 'rgba (0, 203, 159, 0.3)' // Color at 100%}].false)}},}},data: line
},
// Column top disc
{
name: "".type: "pictorialBar".symbolSize: [46.10].// Adjust the shape of the section
symbolOffset: [0, -5].z: 12.symbolPosition: "end".itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0.2);
if(a === '境内') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: "Rgba (21, 106, 199, 0.4)"}, {offset: 1.color: "rgba(55, 130, 211, .5)"}].false)}else if(a === 'outside') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: 'rgba (0, 203, 159, 0.4)' // The color at 0%
}, {
offset: 1.color: 'rgba(0, 203, 159, 0)' // Color at 100%}].false)}},}},data: line
}
]
};
myChart3.setOption(option);
}
Copy the code4. Echars horizontal bar chart
The code is as follows:
function mychart2() {
myChart2 = echarts.init(document.getElementById('profitTrends'));
// Specify the chart configuration items and data
var data = [193.343.343.223.223.343.223.223]
var list=['Other Items'.'stake'.'informationization'.'technology'.'repair'.'technical'.'infrastructure'.'early']
var barWidth = 10;
option = {
grid: {
left: '15%'.top: '15%'.right: '8%'.bottom: '15%',},xAxis: {
show: false.splitLine: {
show: false,}},yAxis: {
data: list,
splitLine: {
show: false,},axisLabel: {
textStyle: { fontSize: '80%'.color: '#FFFFFF'}},axisLine: {
show: true.// display the vertical coordinate
lineStyle: {color:"#153F77".width:'3'.type:'solid'}},axisTick: false,},series: [{type: 'pictorialBar'.type: 'bar'.barWidth:barWidth,
zlevel: 2.data: data,
itemStyle: {normal: {barBorderRadius: [0.100.0 ,0].color:function(params){/ / gradients
var colorList = [
['rgba(8, 41, 88, 1)'.'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)'.'rgba(42, 125, 249, 1)'],
['rgba(8, 41, 88, 1)'.'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)'.'rgba(42, 125, 249, 1)'],
['rgba(8, 41, 88, 1)'.'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)'.'rgba(42, 125, 249, 1)'],
['rgba(8, 41, 88, 1)'.'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)'.'rgba(42, 125, 249, 1)']];var index=params.dataIndex;
if(params.dataIndex>=colorList.length){
index=params.dataIndex-colorList.length;
}
return new echarts.graphic.LinearGradient(0.0.1.0[{offset: 0.color: colorList[index][0] {},offset: 1.color: colorList[index][1]}]); },label: {show:true.position:'right'.formatter:function(params){// Set the color of the text on the bar chart to different
// console.log(params.dataIndex)
if(params.dataIndex %2= =0) {return '{a|'+ data[params.dataIndex]+'} '
}else{
return '{b|'+ data[params.dataIndex]+'} '}},rich: {a: {color:"#03A88E"
},
b: {color:"#2B8FFF"},}},}},// yAxisIndex:0,
},
{
name:"Box".type:'bar'.barGap: '100%'.// Place the border and column in the same position
barWidth:barWidth,
// barCategoryGap:20,
zlevel: 2.data: data,
itemStyle: {/ / color
color:"none"./ / border color
borderColor:"#00C1DE"./ / border width
borderWidth:1.// The corner arc of the border
barBorderRadius: [0.100.0 ,0]./ / padding:,2,2,2 [2],
}
// yAxisIndex:1,}}; myChart2.setOption(option); }Copy the code5. Echars histogram with small squares inside
The code is as follows:
function mychart4(){
mychart4 = echarts.init(document.getElementById('profitRate'));
let colors = [{
one: "#67E0E3".two: "#0181DE"}, {one: "#9336FF".two: "#146AFF"}, {one: "# 082757".two: "#02B093",}];let echartData = [{
name: "Financial".value: 1300}, {name: "Technology and Environmental Protection".value: 2200}, {name: "Chemical".value: 3900}, {name: "Transportation".value: 1800}, {name: "Water".value: 6289}, {name: "New energy".value: 8288}, {name: "Thermal power".value: 3100}, {name: "Coal".value: 2021,},];let xAxisData = echartData.map(v= > v.name);
let yAxisData = echartData.map(v= > v.value);
option = {
grid: {
left: '15%'.top: '20%'.right: '8%'.bottom: '25%',},xAxis: {
type: 'category'.data: xAxisData,
triggerEvent:true.// Set the coordinate click event
axisLine: {
show: false
},
axisLabel: {
color: "#81ACCF".fontSize: '80%',},axisTick: {
show: false}},yAxis: {
type: 'value'.// max:100,
axisLine: {
show: true.lineStyle: {
color: "#0C4F81"}},nameTextStyle: {
color: '#81ACCF'.fontSize: '60%',},axisLabel: {
color: "#4F88BD".fontSize: '60%'.formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted".color: "#0C4F81"}}},series: [{name:'Asset-liability ratio of All Sectors of the Group'.type: 'bar'.// Set type to pictograph
barWidth: '18'.// Histogram width
itemStyle: {
normal: {
color: function (params) {
let odd = params.dataIndex % 2;
return {
type: "linear".x: 0.y: 0.x2: 0.y2: 1.colorStops: [{
offset: 0.color: colors[odd].one // The color at 0%
},
{
offset: 1.color: colors[odd].two // Color at 100%}}},label: {show:true.position:'top'.formatter:function(params){// Set the color of the text on the bar chart to different
// console.log(params.dataIndex)
if(params.dataIndex %2= =0) {return '{a|'+ yAxisData[params.dataIndex]+'} '
}else{
return '{b|'+ yAxisData[params.dataIndex]+'} '}},rich: {a: {color:"#0EFCFF"
},
b: {color:"#6947FF"},}},},z: 10.zlevel: 0.data: yAxisData,
},
{
type: 'pictorialBar'.// Set type to pictograph
symbol: 'rect'.// Shape type, rectangle with rounded corners
symbolMargin: '2'.// Graphics are spaced vertically
symbolRepeat: true.// Whether the graph repeats
/ / space
itemStyle: {
normal: {
color: '#0F375F'}},symbolRepeat: 'fixed'.symbolClip: true.symbolSize: [18.2].symbolPosition: 'start'.symbolOffset: [0, -1].// symbolBoundingData: this.total,
width: "100%".z: 0.zlevel: 1.data: yAxisData,
}
]
};
mychart4.setOption(option);
}
Copy the code6. Echars Triangle diagram
The code is as follows:
function mychart3() {
myChart3 = echarts.init(document.getElementById('profitIncome'));
let echartData = [{
name: "Territory".value: 4100}, {name: "Outside".value: 2990,}];let xAxisData = echartData.map(v= > v.name);
let yAxisData = echartData.map(v= > v.value);
option = {
grid: {
left: '15%'.top: '20%'.right: '8%'.bottom: '15%'
},
xAxis: {
type: 'category'.data: xAxisData,
triggerEvent:true.// Set the coordinate click event
axisTick: {show: false},
axisLine: {
show: false,},axisLabel: {
color: "#81ACCF".fontSize: '80%',}},yAxis: {
nameTextStyle: {color:'#81ACCF'.fontSize:'60%',},splitLine: {
show: true.lineStyle: {
type: "dotted".color: "#0C4F81"}},axisLabel: {
color: "#4F88BD".fontSize: '60%'.formatter: '{value}'
},
axisLine: { // Change the color of the coordinate axes
show: true.// display the vertical coordinate
lineStyle: {
color: "#0C4F81"}},},color: ['#307fd0'].series: [{
name: 'hill'.type: 'pictorialBar'.// The position is offset from the 0 scale
barCategoryGap: '80%'.// Graphic width
barWidth:50.// Shape of the graph
symbol: 'path://M150 50 L130 130 L170 130 Z'.itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0.2);
if(a === '境内') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: "rgba(43, 128, 255, 1)"}, {offset: 1.color: "rgba(8, 33, 73, 1)"}].false)}else if(a === 'outside') {return new echarts.graphic.LinearGradient(0.0.0.1[{offset: 0.color: 'rgba(2, 176, 147, 1)' // The color at 0%
}, {
offset: 1.color: 'rgba(8, 39, 87, 1)'// Color at 100%}].false)}},label: {
show: true.// Enable display
position: 'top'.// display at the top
textStyle: { // Numeric style
// color: '#77C8FF',
fontSize: '60%'
},
formatter:function(params){// Set the color of the text on the bar chart to different
// console.log(params.dataIndex)
if(params.dataIndex %2= =0) {return '{a|'+ yAxisData[params.dataIndex]+'} '
}else{
return '{b|'+ yAxisData[params.dataIndex]+'} '}},rich: {a: {color:"#2B8FFF"
},
b: {color:"#03A88E"},},},},data: yAxisData,
z: 10
}, {
name: 'glyph'.type: 'pictorialBar'.barGap: '0%'.symbolPosition: 'end'.symbolSize: 50.symbolOffset: [0.'120%']]}}; myChart3.setOption(option); }Copy the code7. Echars ring diagram with outer border
The code is as follows:
function mychart1() {
myChart1 = echarts.init(document.getElementById('profitTotal'));
let echartData = [{
name: 'cost'.value: 30}, {name: 'investment'.value: 70,},];let xAxisData = echartData.map(v= > v.name);
let yAxisData = echartData.map(v= > v.value);
option = {
color: ['#03A08C'.'#1D6CDC'].legend: {
orient: 'vertical'.// 'vertical' ,'horizontal'
x: 'right'.// 'center' | 'left' | 'right' | {number},
y: 'center'.// 'center' | 'bottom' | {number}
padding: [0.80.0.0].align:'left'.textStyle: { // Style the legend text
color: '#81ACCF'.fontSize: 14.fontWeight: '100',},// Field control shape types include circle, rect,line, roundRect, triangle, diamond, pin, arrow, none
itemWidth: 18.// Set the width
itemHeight: 10.// Set the height
// itemGap: 40, // set spacing
selectedMode:false.// Cancel the click event on the legend
data:xAxisData,
},
series: [{name: 'Access source'.type: 'pie'.radius: ['25%'.'70%'].avoidLabelOverlap: false.itemStyle: {
borderColor: '#0A284C'.borderWidth: 2,},label: {
normal: {
position: 'inner'.show : false.formatter:'{c}%'}},labelLine: {
normal: {
show: false}},data:echartData,
},
{
name: 'Outer border'.type: 'pie'.radius: ['25%'.'80%'].avoidLabelOverlap: false.itemStyle: {
normal: {color:function(params){/ / gradients
var colorList = ['rgba (3, 160, 140, 0.2)'.'rgba (3, 105, 211, 0.2)'];
return colorList[params.dataIndex]
},
/ / color: 'rgba (62109255,0.4)',
borderColor: '#0A284C'.borderWidth: 2,}},label: {
normal: {
position: 'inner'.show : true.color:'#ffffff'.formatter:'{c}%'}},labelLine: {
normal: {
show: false}},data:echartData,
}]
};
myChart1.on('mouseover'.'series.pie'.function(params) {
myChart1.dispatchAction({
type: 'highlight'.dataIndex: params.dataIndex,
seriesIndex: 0}); }); myChart1.on('mouseout'.'series.pie'.function(params) {
myChart1.dispatchAction({
type: 'downplay'.dataIndex: params.dataIndex,
seriesIndex: 0}); }); myChart1.setOption(option); }Copy the codeFollow-up encounter other records will continue to update 😊~~~
Column recommended
Recommend their own column, welcome everyone to collect attention to 😊~
- Set the interview
- Native js set
- Vue set
- Visual set
- CSS set
Past hot articles
- Vue interview summary
- Js Interview questions often contain detailed answers
- Es6 summary
- The JS array reduce() method
- Js array sort ()
- Summary of wechat mini program interview
- Css3 implementation of animation effects commonly used method guide
- Front end 3D Earth + scan special effects implementation
- How to use pure CSS to achieve div box four corners ornament