The most complete synthesis of echarts visual charts

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

Tags: Front-end echarts

Posted on Wed, 17 Nov 2021 21:59:52 -0500 by phpScott