How to use ECharts in the project

---

foreword

提示：这里可以添加本文要记录的大概内容：

This article mainly shares with you the past and present of ECharts and the process steps of using ECharts in projects, as well as some common configurations of ECharts

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Introduction to ECharts

Common databases:

• D3.js is currently the most highly rated Javascript visualization tool library on the Web (difficult to get started)
• ECharts.js An open source Javascript data visualization library produced by Baidu (made in China)
• Highcharts.js Foreign front-end data visualization library, non-commercial and free, used by many large foreign companies
• AntV Ant Financial's new generation of data visualization solutions, etc.

Therefore, ECharts is an open source Javascript data visualization library produced by Baidu. Highcharts is used more abroad, and Echarts is used more in China. The relationship between the two is a bit like WPS and Office. It can run smoothly on PCs and mobile devices, and is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc. ) . Highly customized data visualization charts.

2. Process steps when using ECharts

1. Download echarts and import it into your page

• download echarts
• Introduce into your project components

import echarts from 'echarts';

2. Prepare a div box

<div id="main" style="width: 600px;height:400px;"></div> //方法一对应的盒子
<div class="content-460300" ref="unlockTrendRef"></div> //方法二对应的盒子

3. Initialize echarts instance object

var myChart = echarts.init(document.getElementById('main')); //方法一对应的初始化
let unlockTrendChart = echarts.init(this.$refs.unlockTrendRef); //方法二对应的初始化

4. Specify configuration items and data (option)

var option = {
    
    
	//方法一对应的配置
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

var option = {
    
    
	//方法二对应的配置
        title: {
    
    
          text: '最近一个月开锁方式折线图(人)',
          left: 0,
          top: 0,
          textStyle: {
    
    
            fontSize: 12,
            color: 'rgba(192, 216, 255, 1)'
          }
        },

        grid: {
    
    
          //图表和父盒子之间的距离
          left: '40px',
          right: '40px',
          bottom: '20px',
          top: '20%',
          containLabel: true
        },
        legend: {
    
    
          data: ['指纹开锁', '门卡开锁', '密码开锁'],
          textStyle: {
    
    
            color: '#c0d8ff'
          }
        },
        xAxis: {
    
    
          data: unlockTrendXKey,
          type: 'category',
          boundaryGap: false,
          axisLabel: {
    
    
            interval: 0,
            rotate: 0,
            color: '#DFDDEA',
            fontFamily: 'PingFang SC',
            textStyle: {
    
    
              color: '#C0D8FF', //文字的颜色
              fontSize: '12'
            }
          },
          axisLine: {
    
    
            lineStyle: {
    
    
              color: '#5897ff',
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: {
    
    
          type: 'value',
          //Y轴的坐标文字
          minInterval: 1, //y坐标轴最小间隔大小
          axisLabel: {
    
    
            show: true,
            textStyle: {
    
    
              color: '#C0D8FF' //文字的颜色
            },
            fontSize: 10,
            fontFamily: 'PingFang SC'
          },
          splitLine: {
    
    
            lineStyle: {
    
    
              // 使用深浅的间隔色
              color: ['#5897ff']
            }
          },
          axisLine: {
    
    
            show: false
          },
          axisTick: {
    
    
            //y坐标轴刻度线设置
            show: false
          }
        },
        tooltip: {
    
    
          trigger: 'axis'
        },
        series: [
          {
    
    
            name: '指纹开锁',
            type: 'line',
            stack: 'Total',
            data: fingerVal
          },
          {
    
    
            name: '门卡开锁',
            type: 'line',
            stack: 'Total',
            data: cardVal
          },
          {
    
    
            name: '密码开锁',
            type: 'line',
            stack: 'Total',
            data: codeVal
          }
        ]
      };

5. Set the configuration item to the echarts instance object

myChart.setOption(option); //方法一对应的设置
unlockTrendChart.setOption(option); //方法二对应的设置

Show results

• The corresponding effect of method 2

Three, commonly used configuration

The main configuration that needs to be understood:series xAxis yAxis grid tooltip title legend color

• series
  List of series. Each series typedetermines its own chart type via
• xAxis
  The x-axis in the rectangular coordinate system grid
• yAxis
  The y axis in the rectangular coordinate system grid
• grid
  Cartesian coordinate system drawing grid.
• tooltip
  prompt box component
• title
  title component
• legend
  legend component
• color
  palette color list

Summarize

The core of echarts use is:

• prepare div box
• Initialize the instance object, echarts.init(div box)
• Specify configuration items and data
• Give the configuration item to the instantiated thing, myChart.setOption(option)
  sharing is here, if it is helpful to you, remember to like it or leave a message to discuss together if you have any questions , and grow together! ! !