1, Add background to chart
Add an outer div to the chart to set the background for this outer Div
html:
<!--html-->
<div class="setimg">
<div echarts [options]="rightOption4" class='demo-chart'></div>
</div>
css:
.setimg {
width: 100px;
height: 100px;
margin:0 auto;
background: url("../../assets/icon2.png") no-repeat;
background-size:50px 50px;/*Background picture size*/
background-position: center center;/*Center background picture*/
border: 1px solid blue;/*It's useless. It's convenient to debug 0.0*/
}
.demo-chart {
width: 100%;
height: 100%;
margin-top: 0 ;
}
Display effect:
2, Add indicator lines to a ring
Remove the label and label line attributes in series [], which should be displayed by default (the specific reason is unknown)
Display effect: 
3, Add a number above the histogram
Add in series: []
ts:
series : [
{
name:'jiang',
type:'bar',
data: [40, 60, 50, 88, 67, 55, 34, 56],
label:{
show:true,
position:'top',//Show values at top
}
},
]
4, Add percentage (string) above histogram
Just add a formatter attribute just like adding numbers
You can't write a string directly in data
series : [
{
name: 'jiang',//name
type: 'bar',
barWidth: '50%',
data: [40, 60, 50, 88, 67, 55, 34, 56],
label:{
show:true,
position:'top',//Show values at top
formatter:'{c}%'//Add "%" after number
}
},
]
5, Remove gridlines and coordinate lines
In xAxis: [] and yAxis: []
xAxis : [
{
type : 'category',
data : ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven','Eight'],
axisTick: {
alignWithLabel: true
},
show:false,//Remove the coordinate line
splitLine:{
show:false//Remove gridlines
},
axisLabel: {
show:true,
textStyle:{
color:'#fff' //x-axis font color
}
}
}
],
yAxis : [
{
type : 'value',
show : true,
splitLine: {
show: true
}
}
],
6, Change histogram color
series : [
{
name: 'jiang',
type: 'bar',
barWidth: '35%',
data: [40, 60, 50, 88, 67, 55, 34, 56],
label:{
show:true,
position:'top',
formatter:'{c}%'
},
color: function(params) {
// build a color map as your need.
var colorList = [
'#FF0000','#FF6600','#FFFF00','#66FF00',
'#00FFFF','#0000FF','#CC00FF','#FF0099'
];
return colorList[params.dataIndex]
},
}
]
7, Introduce china.js
Introduce china.js
ts:
centerOption = {
/*
title: {
//text: 'Order quantity ',
//subtext: 'Pure fiction ',
x: 'center'
},
*/
/*
tooltip: { // Prompt box component.
trigger: 'item' // Triggered by data item graph, it is mainly used in scatter chart, pie chart and other charts without category axis.
},
*/
/*
legend: {
orient: 'horizontal', // Arrangement direction of legend
x: 'left', // Location of legend
//data: ['Order quantity]
},
*/
visualMap: { // Color setting dataRange
x: 'left',
y: 'center',
splitList: [
{
start: 1500
}, {
start: 900,
end: 1500
}, {
start: 310,
end: 1000
}, {
start: 200,
end: 300
}, {
start: 10,
end: 200,
label: '10 To 200 (custom label)'
}, {
start: 5,
end: 5,
label: '5(Custom special colors)',
color: 'black'
}, {
end: 10
}
],
// Min: 0, Max: 2500, calculable: true, / / color is stripe
text: [
'high', 'low'
], // Text, default to numeric text
color: ['#E0022B', '#E09107', '#A3E00B']
},
//toolbar
/*
toolbox: { // toolbar
show: true,
orient: 'vertical', // Layout orientation of toolbar icon
x: 'right',
y: 'center',
feature: { // Configuration items of each tool.
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
}, // The data view tool can display the data used in the current chart and update it dynamically after editing.
restore: {
show: true
}, // Configuration item restore.
saveAsImage: {
show: true
} // Save as a picture.
}
},
*/
roamController: { // Control the up, down, left and right of the map, zoom in and zoom out, not shown on the map
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
//name: 'order quantity',
type: 'map',
mapType: 'china',
roam: false, // Whether to turn on mouse zoom and pan roaming
dataRange: {// Color change settings
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 To 200 (custom label)'},
{start: 5, end: 5, label: '5(Custom special colors)', color: 'black'},
{end: 10}
],
// Calculable: true, / / the color is striped
// Text: ['high', 'low'], / / text, default value text
color: ['#E0022B', '#E09107', '#A3E00B']
},
itemStyle: { // Polygon style of map area
normal: { // Is the style of the drawing by default
label: {
show: true, // Show label or not
textStyle: {
color: 'rgb(249, 249, 249)'
}
}
},
emphasis: { // It is the pattern of the figure in the highlighted state, for example, when the mouse is hovering or the legend is highlighted
label: {
show: true
}
}
},
top: '3%', // Distance between component and container
data: [
{
name: 'Beijing',
value: Math.round(Math.random() * 2000)
}, {
name: 'Tianjin',
value: Math.round(Math.random() * 2000)
}, {
name: 'Shanghai',
value: Math.round(Math.random() * 2000)
}, {
name: 'Chongqing',
value: Math.round(Math.random() * 2000)
}, {
name: 'Hebei',
value: 0
}, {
name: 'Henan',
value: Math.round(Math.random() * 2000)
}, {
name: 'Yunnan',
value: 5
}, {
name: 'Liaoning',
value: 305
}, {
name: 'Heilongjiang',
value: Math.round(Math.random() * 2000)
}, {
name: 'Hunan',
value: 200
}, {
name: 'Anhui',
value: Math.round(Math.random() * 2000)
}, {
name: 'Shandong',
value: Math.round(Math.random() * 2000)
}, {
name: 'Xinjiang',
value: Math.round(Math.random() * 2000)
}, {
name: 'Jiangsu',
value: Math.round(Math.random() * 2000)
}, {
name: 'Zhejiang',
value: Math.round(Math.random() * 2000)
}, {
name: 'Jiangxi',
value: Math.round(Math.random() * 2000)
}, {
name: 'Hubei',
value: Math.round(Math.random() * 2000)
}, {
name: 'Guangxi',
value: Math.round(Math.random() * 2000)
}, {
name: 'Gansu',
value: Math.round(Math.random() * 2000)
}, {
name: 'Shanxi',
value: Math.round(Math.random() * 2000)
}, {
name: 'Inner Mongolia',
value: Math.round(Math.random() * 2000)
}, {
name: 'Shaanxi',
value: Math.round(Math.random() * 2000)
}, {
name: 'Jilin',
value: Math.round(Math.random() * 2000)
}, {
name: 'Fujian',
value: Math.round(Math.random() * 2000)
}, {
name: 'Guizhou',
value: Math.round(Math.random() * 2000)
}, {
name: 'Guangdong',
value: Math.round(Math.random() * 2000)
}, {
name: 'Qinghai',
value: Math.round(Math.random() * 2000)
}, {
name: 'Tibet',
value: Math.round(Math.random() * 2000)
}, {
name: 'Sichuan',
value: Math.round(Math.random() * 2000)
}, {
name: 'Ningxia',
value: Math.round(Math.random() * 2000)
}, {
name: 'Hainan',
value: Math.round(Math.random() * 2000)
}, {
name: 'Taiwan',
value: Math.round(Math.random() * 2000)
}, {
name: 'Hong Kong',
value: Math.round(Math.random() * 2000)
}, {
name: 'Macao',
value: Math.round(Math.random() * 2000)
}
]
}
]
};
- html medium
<div echarts [options]="centerOption" class='context'></div>
Display effect:
