一分钟教你ECharts的使用

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

ECharts使用

ECharts使用五步曲

步骤1：下载引入文件ECharts.js文件-------------->图标依赖这个js库

步骤2：准备一个具备大小的DOM容器----------->生成的图标会放入这个容器内

步骤3：初始化实例对象 echarts.init()------------->实例化echarts对象

步骤4：指定配置项和数据（option）------------->根据具体需求修改配置选项

步骤5：将配置项设置给echarts实例对象---------->让echarts对象根据修改好的配置生效

步骤1：下载引入文件ECharts.js文件
步骤2：准备一个盒子用来装生成的图标
步骤3：初始化实例对象 echarts.init()
// 基于准备好的dom，初始化echarts实例     echarts.init()
let myChart = echarts.init(document.getElementById('main'))
步骤4：指定配置项和数据
// 绘制图表   找到对应的图表复制内容
let option={
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
​
步骤5：将配置项和数据（option）设置给 实例对象（ myChart ）
 myChart.setOption(option)
​

选择不同类型的图标，在官网实例找对应的图标，直接将配置内容复制，粘贴到我们指定配置项里，就会自动生成对应的图标

注意点：

1、 想要实现交互效果，也就是图标的数据跟着变的情况，直接将我们的数组数据，赋值给图标的数组数据

2、更改图标数据后，一定要再次将配置项和数据设置给实例对象

//注意更改图标数据，一定要再次渲染
 myChart.setOption(option);

在vue中使用

1、下依赖包 4.8.0

npm install echarts@4.8.0 -S

2、全局引入

我们安装完成之后，可以在 main.js 中全局引入 echarts

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3、代码实现

<template>
  <div class="dashboard-container">
      #1、准备一个盒子用来装生成的图标
    <div id="main" style="width: 600px;height:400px;" />
  </div>
</template>
​
<script>
import { mapGetters } from 'vuex'
// Dashboard
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([      'name'    ])
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      #2、 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main'))
      #3、指定图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      #将配置项和数据（option）设置给 实例对象（ myChart ）
      myChart.setOption(option)
    }
  }
​
}
</script>
​
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
​

在vue中使用时要获取DOM要在mounted中获取，可以封装成函数，然后在mounted里调用，

也可直接在mounted里写，但是写成函数方便管理