如何在项目中使用ECharts

---

前言

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

这篇文章主要和大家分享ECharts的前世今生和在项目中使用ECharts流程步骤，以及说一下一些ECharts常用的配置

---

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

一、ECharts介绍

常见的数据库：

• D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
• ECharts.js 百度出品的一个开源 Javascript 数据可视化库 （是国产哦）
• Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
• AntV 蚂蚁金服全新一代数据可视化解决方案 等等

所以，ECharts是百度出品的一个开源 Javascript 数据可视化库，国外Highcharts用的比较多，在国内Echarts用的比较多，两者的关系有点像WPS和Office一样。它可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts使用时的流程步骤

1.下载echarts并且引入到你的页面中

• 下载echarts
• 引入到你的项目组件中

import echarts from 'echarts';

2.准备一个div盒子

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

3.初始化echarts实例对象

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

4.指定配置项和数据(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.将配置项设置给echarts实例对象

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

效果展示

• 方法二对应的效果

三、常用的配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

• series
  系列列表。每个系列通过 type 决定自己的图表类型
• xAxis
  直角坐标系 grid 中的 x 轴
• yAxis
  直角坐标系 grid 中的 y 轴
• grid
  直角坐标系内绘图网格。
• tooltip
  提示框组件
• title
  标题组件
• legend
  图例组件
• color
  调色盘颜色列表

总结

echarts使用最核心的就是：

• 准备div盒子
• 初始化实例对象，echarts.init(div盒子)
• 指定配置项和数据
• 将配置项给实例化东西，myChart.setOption(option)
  分享就到这里了哈，如果对你有帮助记得点赞或如果有疑问可以留言一起讨论，一起进步成长！！！