Steps for introducing echarts in Vue and common configuration items for line charts and bar charts

npm i echarts

//Educate echarts globallyimport * as echarts from 'echarts';
// Need to be mounted on the Vue prototype.$echarts = echarts;

import * as echarts from "echarts";

<div ref="chart"></div>

<script>
import * as echarts from "echarts";
export default {
name: 'MyData',
data() {
return {

};
},
mounted() {
();
},
methods: {
echartsInit() {

}
},
};
</script>

methods: {
echartsInit() {
//Initialize the containerconst myChart = (this.$refs.pro_chart); 
const option = {Here are the various configuration items of the chart，From the official documentation}; 
}
},

echartsInit() {
const myChart = (this.$); //Initialize the containerconst option = {Here are the various configuration items of the chart，From the official documentation};
(option);
}

option = {
title: {
text: 'title'
},
//Related settings of legendlegend: {
x:'center', //Horizontal positiony:'bottom', //Vertical positionpadding: [10,0,0,0], //The distance from the upper right and lower leftitemWidth: 30, //The legend widthitemHeight: 30, //The legend is hightextStyle: { //The font style of the legendfontSize: 26, 
color: '#666',
},
data: ['Category 1', 'Category 2'], //The legend name should correspond to the data name},
//This is the panel configuration displayed by moving the mouse to a certain datatooltip: {
trigger: 'item',
triggerOn: 'click',
axisPointer: {
type: 'none'
},
formatter: function () {
return '17.5KG'
}
},
// These are some tools, such as the saveAsImage below is an option to save as an imagetoolbox: {
show: false,
feature: {
saveAsImage: {}
}
},
//The distance of the picturegrid: {
left: '3%',
right: '4%',
bottom: '5%',
top: '5%',
containLabel: true
},
// x-axis related configurationxAxis: {
type: 'category',
boundaryGap: false, //You know whether the coordinate value is displayed on the little head or between the head heads,axisLabel: {
//Set the display interval of the x-axisinterval: 0,
//X axis coordinate text line-breakformatter: function (value, index) {
var num = 5; //The number of words displayed per linevar str = "";
var valLength = ; //The number of words of this item's x-axisvar rowNum = (valLength / num); // Number of rowsif (rowNum > 1) {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = (start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
},
//Scale related configuration:axisTick: {
show: false,//Remove the scale},
//Axis related configuration:axisLine: {
show: false, //Remove the line of the y-axislineStyle: {color: '#ccc'}, //Set the axis color},
// prettier-ignore
data: ['1','1''1''1''1''1''1''1']
},
yAxis: {
type: 'value',
//Hide the horizontal line of the y-axissplitLine: {
show: false
},
//Set the initial and end values ​​of the y-axismin: '20',
max: '24.5',
splitNumber: 9, //Set the interval of the y-axisaxisLabel: {
formatter: function (value) {
//Retain one decimal and add unitsreturn (1) + ' °C';
}
},
axisPointer: {
snap: true
},
//Scale related configuration:axisTick: {
show: false,//Remove the scale},
//Axis related configuration:axisLine: {
show: false, //Remove the line of the y-axislineStyle: {color: '#ccc'}, //Set the axis color},
},
series: [
{
name: 'Category 1',
type: 'line',
lineStyle: {
color: 'rgb(118, 162, 255, 1)', //Change the line colornormal: {
opacity: 0, //Transparency, 0 hide 1 display}
},
showSymbol: true, //Show hidden dotsitemStyle: {
color: 'RGBA(118, 162, 255, 1)', //The color of the dots},
showBackground: true, //Whether to display the backgroundbackgroundStyle: {
color: 'RGBA(255, 228, 218, 1)' //Background color},
smooth: true, //Is the data connected smoothlydata: [21.1, 22.1, 23.5, 23.2, 22.5, 23.2, 22.1],
},
{
name: 'Category 2',
type: 'line',
lineStyle: {
color: 'rgb(63, 207, 153, 1)', //Change the line colornormal: {
opacity: 1, //Transparency, 0 hide 1 display}
},
showSymbol: true, //Show small dots on hidden polylineitemStyle: {
color: 'RGBA(63, 207, 153, 1)'
},
smooth: true,//Is the data connected smoothlydata: [21.3, 22.8, 22.5, 23.6, 21.5, 23.2, 21.1],
},
]
};

option = {
//legendlegend: {
x: 'center',
y: 'bottom',
padding: [10, 0, 3, 0],
textStyle: { //The font style of the legendcolor: '#fff',
},
data: ['Category A', 'Category B']
},
//Position in the containergrid: {
left: '2%',
right: '3%',