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' }, }