1. Modify the color of the chart legend
Define the textStyle attribute in the legend configuration item to set the color.
let option = {
legend: {
textStyle: {
color: 'white'
},
},
}2. Modify the x/y axis line color of the chart
Add the axisLine configuration item to the x/y axis for modification.
let option = {
xAxis: {
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
},
yAxis: {
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)",
}
},
},
}3. Modify the default color of the chart
Add the color configuration item in the series to set the color.
let option = {
series: [
{
color: ["rgb(40,135,193)"],
type: "bar",
data: [425, 821, 522, 522],
},
{
color: ["rgb(231,137,58)"],
type: "line",
data: [21, 85, 98, 21],
},
],
};4. Add description text on the x/y axis of the chart
Just add a name attribute to the x/y axis.
let option = {
yAxis: {
name: "(million vehicles)",
},
}5. Remove the grid lines from the chart background
Add the splitLine attribute to the x/y axis and set show to false.
let option = {
xAxis: {
splitLine: {
show: false
},
},
}6. Set the width of the column chart
Add the barWidth attribute to the series to set the required value.
let option = {
series: [
{type: 'bar', barWidth: 12,}，
{type: 'bar', barWidth: 12,}
]
}7. Set the inclination of the x-axis text of the chart
Add the axisLabel attribute to the x-axis to set the required angle value.
let option = {
xAxis: {
axisLabel: {
interval: 0,
rotate: 40,//Degree of inclination
},
},
}8. Set the background color of the chart
Add the backgroundColor configuration item to the option to set the color.
let option = {
backgroundColor: ["rgb(5,7,59)"],
}9. The pie chart display information allows its value and percentage to be displayed
Add the itemStyle configuration item to the series configuration and display it as needed.
let option = {
series: [
itemStyle: {
normal: {
label: {
show: true, //show
formatter: '{b} : {c} ({d}%)', //b: name; c: value; d: percentage
},
labelLine: {
show: true, //show
},
}
},
]
}10. Adjust the spacing between the column chart and the top legend
Add the grid configuration item in option to set the required value.
let option = {
grid: {
left: '5%',
right: '6%',
bottom: '3%',
top: "20%",
containLabel: true
},
}11. Add a text description in the middle of the pie chart
Just add the required text under the option.
let option = {
title: {
text: "86.5%", //value
left: "center", //in the center
top: "50%", //50% from the top
textStyle: { //text style
color: "rgb(30,30,30)", //text color
fontSize: 16, //font size
align: "center" //in the center
}
},
graphic: {
type: "text", //type
left: "center", //in the center
top: "40%", //40% from the top
style: {
text: "penalty rate", //value
textAlign: "center", //in the center
fontSize: 16, //font size
}
},
}12. The indicator line of the pie chart is displayed and hidden
Add the labelLine attribute to the series configuration item to make it true or false.
let option = {
series: [{
labelLine: {
show: false,
},
}]
}13. Chart width and height adaptive
It is mainly achieved through the resize() method, and a layer of div is placed outside the chart container, and then the width and height of the div of the chart are set to 100%, and the width and height of the outer div can be set.
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
methods: {
radarEcharts() {
let radarVariable = document.getElementById("radarChart"); //get id
let myChartOne = this.$echarts.init(radarVariable); //Initialize the graph
let option = {
//configuration item
// ......
};
window.addEventListener("resize", function () {
myChartOne.resize(); //myChartOne is the value initialized above
});
},
},14. Adjust the spacing between the pie chart and the title
Just set the value of top in the legend configuration item in option.
let option = {
legend: {
top: '0%',
left: 'center'
},
}15. Change the top of the column chart into an arc shape
Add itemStyle configuration item in option to set its radian.
let option = {
itemStyle:{
barBorderRadius:[20,20,0,0]//From left to right: top left, top right, bottom right, bottom left
},
},16. Add download function to the chart
Add the toolbox configuration item to the option to set its properties.
let option = {
toolbox: {
feature: {
saveAsImage: {
title: 'save as picture',//The title can be adjusted by yourself
type: 'png',//download in png format
}
}
},
}17. Too many words in x/y display ellipsis
Add the following code to the xAxis/yAxis method.
axisLabel: {
formatter: function (value) {
if (value.length > 4) {
return `${value.slice(0, 4)}...`;
}
return value;
},
},18. Adjust the position of the pie chart
Add the center configuration item to the series to set the corresponding value.
let option = {
series: [{
center: ["50%", "48%"],//Horizontal and vertical
}]
}19. The screen shakes when the mouse moves into echarts
This problem occurs because the mouse hover event is frequently triggered after using the tooltip configuration item. The solution is to add the transitionDuration attribute to the tooltip and set the value to 0.
let option = {
tooltip: {
transitionDuration:0,//Let the tooltip follow the mousetip
},
}20. Add a scroll bar for the x/y axis when the amount of data is large
Add the dataZoom configuration item in option to set the property.
let option = {
dataZoom: [
{
type: 'slider',//type
show: true,//show
yAxisIndex: [0],//Use the index of the y-axis, the default value is 0
left: '93%',//Percentage from left position
start: 0, //The starting percentage of the data window range
end: 40//Ending percentage of data window range
},
{
type: 'inside',//type
yAxisIndex: [0],//Use the index of the y-axis, the default value is 0
start: 0,//The starting percentage of the data window range
end: 36//Ending percentage of data window range
}
],
}21. If there is no data in the chart, the words "no data" are displayed
By judging the length of the array, you can make "no data" display and hide.
let showed = this.rightPie.length ? false : true
let option = {
title: {
show: showed, // Whether to display the title
text: 'No data',//displayed text
left: 'center',//center horizontally
top: 'center',//center vertically
},
}22. Modify the icon icon of the title
You can select the type you want through the icon attribute.
let option = {
legend: {
textStyle: {
color: "black",//set text color
fontSize: '14' // font size
},
itemWidth: 14, // icon width
itemHeight: 14, // icon height
icon: "roundRect", //Control shape, including circle, rect, roundRect, triangle, diamond, pin, arrow, none
},
}23. The external text of the pie chart is too long to display incompletely
Just put this method in the series configuration item.
label: {
show: true,
fontSize: "12",
normal: {
formatter(v) {
let text = v.name;
return text.length < 4 ?
text :
`${text.slice(0, 4)}\n${text.slice(4)}`;
},
},
},24. The value of the histogram is displayed directly on the column
Put the label configuration item in the object that needs to be displayed in the series configuration item.
label: {
show: true,
// formatter: '{b}\n{c}%', //Add this line of code if you need the unit
},25. Chart switching full screen
This operation can be achieved by putting the toolbox method in the option.
If you are using an svg image, copy the attribute value of d in the svg tag (d="", take out the content in the quotation marks) and paste it behind icon:"path://";
If you are using an external link image, you need to write like this: icon:'image:// https://s1.ax1x.com/2022/04/19/L0GpM4.png' , which is equivalent to image:// + "external link address".
toolbox: {
show: true,//Whether to display the toolbar
feature: {
myFull: {
show: true,
title: "View full screen",
icon: "",
onclick: () => {
let element = document.getElementById("pillarsChart");
// Compatibility with some browsers
if (element.requestFullScreen) {
// HTML W3C proposal
element.requestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
// Firefox (works in nightly)
element.mozRequestFullScreen();
}
// Exit Full Screen
if (element.requestFullScreen) {
document.exitFullscreen();
} else if (element.msRequestFullScreen) {
document.msExitFullscreen();
} else if (element.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
} else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
},
},
saveAsImage: { show: true },
},
},26. Hide the x/y axis tick marks
Add the axisTick configuration item to the x/y axis and set true/false.
xAxis: {
axisTick: {
show: false, //hide tick marks
},
},27. Set the gradient color of the area chart
This can be achieved by adding the areaStyle configuration item in the series method.
series: [
{
type: "line",
yAxisIndex: 1,
areaStyle: {},
smooth: false, //Whether the area chart is changed to an arc shape
lineStyle: {
width: 2, //Outer Line Width
color: "rgb(124,255,255)", //outer line color
},
showSymbol: false, //Remove area chart node circles
areaStyle: {
//Area Fill Gradient Color
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(124,255,255, 0.3)", //0% color
},
{
offset: 1,
color: "rgba(44,56,74, 1)", //100% color
},
],
},
},
},
];28. There are too many words on the x/y axis and an ellipsis is set
Add the axisLabel configuration item in the xAxis/yAxis method to set the matching conditions.
axisLabel: {
formatter: function (value) {
if (value.length > 3) {
return `${value.slice(0, 3)}...`;
}
return value;
},
},29. Display values on the echarts map
Add the label configuration item in the series method to set the matching conditions.
series: [
{
label: {
normal: {
show: true,
color: "#e0e0e0",
formatter: function (params) {
return (
params.name +
(!params.value ? "" : "(" + params.value + ")")
); //Display text + value on the map
},
}
},
}
]30.echarts pie chart data is too small to display
Add the minAngle attribute to the series method to set the minimum angle.
series: [
{
minAngle: 3,//The minimum sector angle (0 ~ 360), used to prevent the sector from being too small to affect interaction if a certain value is too small.
},
],31. The y-axis coordinate in echarts is not a decimal
Add the minInterval attribute to 1 in the yAxis method.
yAxis: {
minInterval: 1,
},