preface
In the long development career of the front-end, I believe everyone will encounter all kinds of ecarts charts, so how to realize these ecarts charts? In fact, these operations can be realized through the official ecarts api in cooperation with vue. The following will explain in detail from installation to use and the configuration items of charts, including the problems that are easy to occur in each link.
- Installing the charts for echarts
- Using the eckharts chart
- Ecarts chart the configuration items you will use
1, Installing the charts for echarts
The installation of ecarts is actually very easy. In short, it only takes two steps:
When downloading echarts, many people may encounter the problem of unsuccessful installation or error reporting. The solution can be reinstalled or the previous version can be installed.
1. Download echorts
npm install echarts --save npm install echarts@4.8.0 --save
2. Import and register in main.js
import echarts from 'echarts'; Vue.prototype.$echarts = echarts;
2, Using the eckharts chart
We have completed the installation of ecarts above, and we need to use it in the project. In fact, the use of ecarts is also very simple, which can be divided into the following steps:
1. Prepare a div container with width and height for ecarts (simply a space for storing charts)
<div id="radarChart" :style="{ width: '300px', height: '300px' }"></div>
2. Get the definition id and initialize the ecarts instance through the ecarts. Init() method
let radarVariable = document.getElementById("radarChart");
let myChartOne = this.$echarts.init(radarVariable);
3. Adjust the configuration items and data of the chart according to individual needs
let option = {
......
}
4. Generate chart through setOption() method
myChartOne.setOption(option)
Maybe when you see this, you still don't know how to start this thing. Don't worry. After reading the following, I believe you can start the operation directly. The following is the example code of ecarts chart I sort out. You can use the code and comments to help you quickly understand and start
example
1. Single column diagram
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="generalStyle">
<div id="pillarsChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getJxbyl} from '@api/screen'//Imported interface file
const pillarsChart = [] //Define an empty array to push data here
export default {
data (){
return{
upperPillar:[],//Define an empty array to store the data returned by the interface
xPillar:[],//x-axis data
yPillar:[],//y-axis data
}
},
mounted() {
this.pillarsEcharts(); //Define a method to invoke in methods
this.getJxbyl();//Define an interface method to invoke in methods
},
methods: {
//Interface method
getJxbyl(){
//Request interface
getJxbyl({}).then(res=>{
//The request is successful, and the assignment is performed by returning data
this.upperPillar = res.data
this.xPillar = res.data.Xdata
this.yPillar = res.data.Ydata
this.pillarsEcharts()//Be sure to call the method of the chart
})
},
//Chart method
pillarsEcharts() {
//Get id and initialize chart
let pillarsVariable = document.getElementById("pillarsChart");
let myChartTherr = this.$echarts.init(pillarsVariable);
//Configuration item
let option = {
color: ["rgb(40,135,193)"],//Chart color
tooltip: {//Mouse touch display value
foratter: function (params) {
return params[0].name + params[0].seriesName + ":params[0].data"
}
},
xAxis: {//x-axis setting
type: 'category',//type
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)"//Sets the color of the x axis
}
},
axisLabel: {//Sets the tilt of the x-axis text
interval: 0,
rotate: 40//Tilt angle
},
data: this.xPillar && this.xPillar.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
},
yAxis: {//y-axis setting
type: 'value',//type
name: "((set)",//Top text description
axisLine: { /y Axis text color
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
splitLine: {//Remove background grid
show: false
}
},
series: [{
data: this.yPillar && this.yPillar.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
type: 'bar',//type
barWidth: 12, // Sets the width of the histogram
}]
}
myChartTherr.setOption(option)//Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartTherr
}
pillarsChart.push(chartObj)//It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartTherr.resize();//A method of chart adaptation
});
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
2. Foundation line chart
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="tendency">
<div id="brokenChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {obd} from '@api/screen' //Import interface file
const chartsBroken = [] //Define an empty array to push data here
export default {
data() {
return {
brokenLineX: [], //Polyline X-axis data
brokenLineY: [], //Polyline Y-axis data
}
},
mounted() {
this.brokenChart(); //Define a method to invoke in methods
this.obd(); //Define an interface method to invoke in methods
},
methods: {
//Request interface
obd() {
obd({}).then(res => {
//The request is successful, and the assignment is performed by returning data
this.brokenLineX = res.data.xData
this.brokenLineY = res.data.yData
this.brokenChart() //Be sure to call the chart method
})
},
//Chart method
brokenChart() {
//Get id and initialize chart
let brokenChart = document.getElementById("brokenChart");
let myChartTherr = this.$echarts.init(brokenChart);
//Configuration item
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985 ', / / color of polyline
}
}
},
xAxis: {
type: "category", //type
data: this.brokenLineX && this.brokenLineX.map(item =>item), //Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
},
grid: { //Adjust chart coordinates
x: "0", //Rectangular coordinates
y: "20", //Top left ordinate
x2: "0", //Lower right abscissa
y2: "40", //Lower right ordinate
containLabel: true,
},
yAxis: {
type: "value",
},
series: [{
data: this.brokenLineY && this.brokenLineY.map(item =>item), //Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
type: 'line' //type
}],
}
myChartTherr.setOption(option) //Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartTherr
}
chartsBroken.push(chartObj) //It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartTherr.resize(); //A method of chart adaptation
});
},
},
}
</script>
<style scoped>
.tendency {
width: 100%;
height: 90%;
}
</style>
3. Foundation pie chart
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="cakeStyle">
<div id="cakeChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getMeachDistribution} from '@api/screen' //Imported interface file
const cakeChart = [] //Define an empty array to push data here
export default {
data() {
return {
upperCake: [], //Chart data
}
},
mounted() {
this.cakeEcharts(); //Define a diagram method in methods.
this.getMeachDistribution(); //Define an interface method to invoke in methods
},
methods: {
//Interface method
getMeachDistribution() {
//Request interface
getMeachDistribution({}).then(res => {
//The request is successful, and the assignment is performed by returning data
this.upperCake = res.data.data
this.cakeEcharts() //Be sure to call the method of the chart
})
},
//Chart method
cakeEcharts() {
let showed = this.cookie.length ? false : true //Judge that the data is not empty. If there is no data, the word "no data" will be displayed in the chart
//Get id and initialize chart
let cakeVariable = document.getElementById("cakeChart");
let myChartFour = this.$echarts.init(cakeVariable);
let option = {
title: {
show: showed, // Show title
text: 'No data', //Display text
left: 'center', //horizontally
top: 'center', //Vertical center
},
color: ["rgb(202,121,59)", "rgb(44,154,216)", "rgb(54,197,183)", "rgb(29,168,195)"], //Chart color
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: this.upperCake.map(item => { //Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
return {
value: item.value,
name: item.name
}
}),
tooltip: { //Mouse touch display value
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
itemStyle: { //Display style of text
normal: {
label: {
show: true, //display
formatter: '{b} : {c} ({d}%)' //The percentage of each block is displayed
},
labelLine: {
show: true //display
}
}
},
}]
}
myChartFour.setOption(option) //Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartFour
}
cakeChart.push(chartObj) //It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartFour.resize(); //A method of chart adaptation
});
},
}
}
</script>
<style scoped>
.cakeStyle {
width: 100%;
height: 90%;
}
</style>
4. Circular pie chart
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="leftCen">
<div id="emptyChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getIMJcxq} from '@api/screen' //Imported interface file
const emptyChart = [] //Define an empty array to push data here
export default {
data() {
return {
upperCenLeft: [], //Chart data
}
},
mounted() {
this.emptyEcharts(); //Define a diagram method in methods.
this.getIMJcxq(); //Define an interface method to invoke in methods
},
methods: {
//Interface method
getIMJcxq() {
//Request interface
getIMJcxq({}).then(res => {
//The request is successful, and the assignment is performed by returning data
this.upperCenLeft = res.data.pieData
this.emptyEcharts() //Be sure to call the method of the chart
})
},
//Chart method
emptyEcharts() {
//Get id and initialize chart
let emptyVariable = document.getElementById("emptyChart");
let myChartSix = this.$echarts.init(emptyVariable);
let option = {
color: ["rgb(54,190,255)", "rgb(66,245,214)"], //Chart color
legend: {//Top title
top: '5%',//5% from top
left: 'center'//Center
},
tooltip: {//Mouse touch display value
show: true,
trigger: 'item',
formatter: "{b}:{c} ({d}%)",
},
series: [{
type: 'pie',
radius: ['44%', '65%'], //The size of the middle ring and the size of the outer ring
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {//Middle text
label: {
show: true,//display
fontSize: '14',//Text size
}
},
labelLine: {//The indicator line is not displayed
show: false
},
data: this.upperCenLeft.map(item => {//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
return {
value: item.value,
name: item.name
}
}),
}]
}
myChartSix.setOption(option)//Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartSix
}
emptyChart.push(chartObj)//It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartSix.resize();//A method of chart adaptation
});
},
}
}
</script>
<style scoped>
.leftCen {
width: 100%;
height: 90%;
}
</style>
5. Vertical comparison histogram
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getLjlcqk} from '@api/screen' //Imported interface file
const columnarChart = [] //Define an empty array to push data here
export default {
data() {
return {
upperBoth: [], //x-axis chart data
upperhgData: [], //Qualified data
upperbhgData: [], //Nonconforming data
}
},
mounted() {
this.columnarEcharts(); //Define a diagram method in methods.
this.getLjlcqk(); //Define an interface method to invoke in methods
},
methods: {
//Interface method
getLjlcqk() {
//Request interface
getLjlcqk({}).then(res => {
//The request is successful, and the assignment is performed by returning data
this.upperBoth = res.data.xData //x-axis chart data
this.upperhgData = res.data.hgData //Qualified data
this.upperbhgData = res.data.bhgData //Nonconforming data
this.columnarEcharts() //Be sure to call the method of the chart
})
},
//Chart method
columnarEcharts() {
//Get id and initialize chart
let columnarVariable = document.getElementById("columnarChart");
let myChartTwo = this.$echarts.init(columnarVariable);
let option = {
color: ['rgb(40,135,193)', 'rgb(231,137,58)'], //Chart color
legend: {
textStyle: { //Set title color
color: 'white'
}
},
xAxis: {
type: 'category',
splitLine: { //Do not display gridlines
show: false
},
axisLine: { //x axis text color
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
data: this.upperBoth && this.upperBoth.map(item => item), //Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
},
yAxis: {
axisLine: {
lineStyle: { //y axis text color
color: "rgb(35, 208, 229)"
}
},
splitLine: { //Do not display gridlines
show: false
},
},
series: [{
name: 'qualified',
data: this.upperhgData && this.upperhgData.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
type: 'bar', //Chart type
barWidth: 12, //Column width
},
{
name: 'unqualified',
data: this.upperbhgData && this.upperbhgData.map(item =>item), //Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
type: 'bar', //Chart type
barWidth: 12, //Column width
}
]
}
myChartTwo.setOption(option) //Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartTwo
}
columnarChart.push(chartObj) //It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartTwo.resize(); //A method of chart adaptation
});
},
}
}
</script>
<style scoped>
.columnarStyle {
width: 100%;
height: 90%;
}
</style>
6. Folding column mixing
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="cenRight">
<div id="foldBreadChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getIMJcxq} from '@api/screen' //Imported interface file
const foldBreadChart = []//Define an empty array to push data here
export default {
data() {
return {
upperCenRightXData: [], //x-axis bottom text data
upperCenRightBar: [], //Column data
upperCenRightLine:[],//Polyline data
}
},
mounted() {
this.foldBreadEcharts(); //Define a diagram method in methods.
this.getIMJcxq(); //Define an interface method to invoke in methods
},
methods: {
//Interface method
getIMJcxq() {
//Request interface
getIMJcxq({}).then(res => {
//Get the data returned by the interface and assign a value
this.upperCenRightXData = res.data.barData.XData //x-axis bottom text data
this.upperCenRightBar = res.data.barData.bar//Column data
this.upperCenRightLine = res.data.barData.line//Polyline data
this.foldBreadEcharts()//Be sure to call the chart method
})
},
//Chart method
foldBreadEcharts() {
// Get the chart id and initialize the chart
let foldBreadVariable = document.getElementById("foldBreadChart");
let myChartSeven = this.$echarts.init(foldBreadVariable);
//Configuration item
let option = {
tooltip: {//Move the mouse in to display data details
foratter: function (params) {
return params[0].name + params[0].seriesName + ":params[0].data"
}
},
legend: {//Top title
data: ['Repair times', 'Re inspection pass rate'],
textStyle: {//Top title style
color: 'white'//Text color
}
},
xAxis: [{//x axis
type: 'category',
axisLine: {
lineStyle: {//x axis text color
color: "rgb(35, 208, 229)"
}
},
data: this.upperCenRightXData && this.upperCenRightXData.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
axisPointer: {
type: 'shadow',//type
},
}],
yAxis: [{//y-axis
type: 'value',
axisLine: {
lineStyle: {//y axis text color
color: "rgb(35, 208, 229)"
}
},
splitLine: {//Gridlines hidden
show: false
},
name: '(Vehicle)',//Top text description
min: 0,//Starting value of left y-axis
max: 100,//Maximum value of left y-axis
interval: 20,//Increment 20 each time
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
splitLine: {//Gridlines hidden
show: false
},
axisLine: {
lineStyle: {//Right y-axis color
color: "rgb(35, 208, 229)"
}
},
name: '(Re inspection rate%)',//Top right text description
min: 0,//Starting value of right y-axis
max: 100,//Maximum value of right y-axis
interval: 20,//Increment 20 each time
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: 'Repair times',//Top title
type: 'bar',//Type columnar
color: ["rgb(35,208,229)"],//colour
barWidth: 12,//Column width
data: this.upperCenRightBar && this.upperCenRightBar.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
},
{
name: 'Re inspection pass rate',//Top title
type: 'line',//Type polyline
color: ['rgb(211,126,59)'],//colour
yAxisIndex: 1,//The x-axis index used is useful when there are multiple X-axes in a single chart instance
data: this.upperCenRightLine && this.upperCenRightLine.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
}
]
}
myChartSeven.setOption(option)//Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartSeven
}
foldBreadChart.push(chartObj)//It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartSeven.resize();//A method of chart adaptation
});
},
}
}
</script>
<style scoped>
.cenRight {
width: 100%;
height: 90%;
}
</style>
7. Horizontal comparison histogram
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="acrossStyle">
<div id="acrossChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getHbSyJylbh} from '@api/screen' //Imported interface file
const acrossChart = [] //Define an empty array to push data here
export default {
data() {
return {
dateTime: [], //Top header data
chargeListX: [], //Carbon emission data
chargeListY: [], //Refueling volume data
}
},
mounted() {
this.acrossEcharts(); //Define a diagram method in methods.
this.getHbSyJylbh(); //Define an interface method to invoke in methods
},
methods: {
//Interface method
getHbSyJylbh() {
//Request interface
getHbSyJylbh({}).then(res => {
//Get the data returned by the interface and assign a value
this.dateTime = res.data[0]//Top header data
this.chargeListX = res.data[1]//Carbon emission data
this.chargeListY = res.data[2]//Refueling volume data
this.acrossEcharts()//Be sure to call the chart method
})
},
//Chart method
acrossEcharts() {
//Get the chart id and initialize the chart
let acrossVariable = document.getElementById("acrossChart");
let myChartFive = this.$echarts.init(acrossVariable);
//Configuration item
let option = {
color: ["rgb(28,90,144)", "rgb(41,148,149)"],//Icon color
tooltip: {//Mouse touch display value
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
legend: {//Title Style
textStyle: {
color: 'white'
}
},
grid: {//Change the size and position of the chart
left: '5%',
right: '6%',
bottom: '3%',
top: "20%",
containLabel: true
},
xAxis: {
type: 'value',
axisLine: { //x axis text color
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
splitLine: {//x-axis gridlines hidden
show: false
}
},
yAxis: {
type: 'category',
data: ['Refueling volume', 'Carbon emissions'],
axisLine: { //y axis text color
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
splitLine: {//y-axis gridlines hidden
show: false
}
},
series: [{
name: this.dateTime[0] + "month",//Top data, get the data assigned value in data and assign it to name
type: 'bar',//Type cylinder
barWidth: 12,//Column width
data: this.chargeListX && this.chargeListX.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
},
{
name: this.dateTime[1] + "month",//Top data, get the data assigned value in data and assign it to name
type: 'bar',//Type cylinder
barWidth: 12,//Column width
data: this.chargeListY && this.chargeListY.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
}
]
}
myChartFive.setOption(option)//Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartFive
}
acrossChart.push(chartObj)//It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartFive.resize();//A method of chart adaptation
});
},
}
}
</script>
<style scoped>
.acrossStyle {
width: 100%;
height: 90%;
}
</style>
8. Radar chart
<template>
<!-- Used to put echarts The container of the chart must have width and height -->
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getCarPhenonmenon} from '@api/screen' //Imported interface file
const chartsRadar = [] //Define an empty array to push data here
export default {
data() {
return {
upperRadarX: [], //Text information
upperRadarY: [], //Radar chart data
}
},
mounted() {
this.radarEcharts(); //Define a diagram method in methods.
this.getCarPhenonmenon(); //Define an interface method to invoke in methods
},
methods: {
//Interface method
getCarPhenonmenon() {
getCarPhenonmenon({}).then(res => {
this.upperRadarX = res.data.xData//Text information
this.upperRadarY = res.data.yData//Radar chart data
this.radarEcharts()//Be sure to call the chart method
})
},
//Chart method
radarEcharts() {
//Get the chart id and initialize the chart
let radarVariable = document.getElementById("radarChart");
let myChartOne = this.$echarts.init(radarVariable);
//Configuration item
let option = {
radar: [{
indicator: this.upperRadarX,//Text information
center: ['49%', '50%'],//Chart position horizontal vertical
radius: 62,//Fillet radian
}],
series: [{
type: 'radar',//type
tooltip: {//Mouse touch display value
trigger: 'item'
},
areaStyle: {},
color: ['rgb(211,125,50)'],//Chart color
data: [{
value: this.upperRadarY && this.upperRadarY.map(item => item),//Get the array defined in the above data, iterate through the values through the map method, and finally assign values to the data in the chart
}]
}]
}
myChartOne.setOption(option)//Generate charts through setOption() method
const chartObj = {
name: 'week',
value: myChartOne
}
chartsRadar.push(chartObj)//It is added to the array defined at the top through the push method
window.addEventListener("resize", function () {
myChartOne.resize();//A method of chart adaptation
});
},
}
}
</script>
<style scoped>
.columnarStyle {
width: 100%;
height: 90%;
}
</style>
3, Configuration items commonly used in ecarts chart
Through the above code example, I believe you can create your own charts according to your own needs, but when using charts, you can't avoid modifying the original official charts, including some chart colors, text colors, x/y axis description text and so on, At this time, some configuration items need to be adjusted to apply to our own projects. The following are some commonly used configurations. I believe you can design your own ecarts chart after reading it.
1. Modify the color of chart title
It can be modified mainly through textStyle defined in legend.
let option = {
legend: {
textStyle: {
color: 'white'
}
},
}
2. Modify x/y axis color of line chart
Add an axisLine configuration item in the x/y axis and modify it.
let option = {
xAxis: {
//This is the x-axis text color
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
},
yAxis: {
//This is the y-axis text color
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)",
}
},
},
}
3. Modify the default color of the chart
You can directly add the color configuration item in option.
let option = {
color: ['rgb(40,135,193)', 'rgb(231,137,58)'],
}
4. Add description text to the x/y axis of the chart
Add a splitLine attribute where you want to remove the grid line, and set the show value to false.
let option = {
yAxis: {
name: "(10000 vehicles)",
},
}
5. Remove the grid lines from the chart background
Add a splitLine attribute where you want to remove the grid line, and set the show value to false.
let option = {
xAxis: {
splitLine: {
show: false
}
},
}
Before modification
After modification
6. Set the column width of the column chart
Add the barWidth property in the series to set the required value.
let option = {
series: [
{type: 'bar', barWidth: 12,}，
{type: 'bar', barWidth: 12,}
]
}
By default
After modification
7. Set the tilt of x/y axis text
Add the axisLabel attribute to the x/y axis to be tilted, and set the required angle value.
let option = {
xAxis: {
axisLabel: {
interval: 0,
rotate: 40,//Tilt degree
},
},
}
8. Touch the pie chart display value with the mouse, and the corresponding item is displayed in the middle of the pie chart
Directly add a tooltip configuration item in option to configure it.
let option = {
tooltip: {
show: true,//display
trigger: 'item',//data
formatter: "{b}:{c} ({d}%)",//b is equivalent to the corresponding item, c is the value, and d is the percentage
},
}
9. The pie chart displays information so that its value and percentage are displayed
Add the itemStyle configuration item to the series configuration and display it as needed.
let option = {
series: [
itemStyle: {
normal: {
label: {
show: true, //display
formatter: '{b} : {c} ({d}%)', //b: Name; c: Value; d: Percentage
},
labelLine: {
show: true, //display
}
}
},
]
}
By default
After modification
10. The bar chart adjusts the distance between the chart and the top title
Directly add grid configuration items in option and adjust them according to your needs.
let option = {
grid: {
left: '5%',
right: '6%',
bottom: '3%',
top: "20%",
containLabel: true
},
}
11. Add text description in the middle of pie chart
Just add the required text directly under option.
let option = {
title: {
text: "86.5%", //value
left: "center", //Center
top: "50%", //50% from top
textStyle: { //Text style
color: "rgb(30,30,30)", //Text color
fontSize: 16, //Text size
align: "center" //Center
}
},
graphic: {
type: "text", //type
left: "center", //Center
top: "40%", //40% from top
style: {
text: "Penalty rate", //value
textAlign: "center", //Center
fontSize: 16, //font size
}
},
}
12. Pie chart indicator
Add labeline to the series configuration item and set it to true or false.
let option = {
series: [{
labelLine: {//The indicator line is not displayed
show: false
},
}]
}
13. Chart width height adaptation
It is mainly realized through the resize() method. Set a layer of div outside the chart container, and then set the width and height of the div of the chart to 100%, and set the width and height of the div outside.
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
//js
radarEcharts() {
let radarVariable = document.getElementById("radarChart"); //Get id
let myChartOne = this.$echarts.init(radarVariable); //Initialize chart
let option = { //Configuration item
......
}
window.addEventListener("resize", function () {
myChartOne.resize(); //myChartOne is the value defined above
});
}
14. Adjust the distance between the pie chart and the title
You can directly set the value of top in the legend attribute in option.
let option = {
legend: {
top: '0%',
left: 'center'
},
}
