Echarts基本使用

前端进行数据可视化的工具非常多：

常见的框架： ECharts 、g2、d3、vis、hightChart等等；

g2框架封装：bizcharts(react) viser(vue)；

地理可视化： g2、L7、高德的 Loca、 菜鸟的 鸟图；

3D可视化：three.js； n 目前使用最多的还是ECharts

使用ECharts时

第一步：我们可以通过以下方式获取ECharts：

        从 Apache ECharts 官网下载界面 获取官方源码包后构建；

        在 ECharts 的 GitHub 获取；

        p通过 npm 获取 echarts，npm install echarts --save；

        通过 jsDelivr 等 CDN 引入；

第二步：引入Echarts p可以通过不同的方式引入

第三步：初始化Echarts对象，并且设置配置进行绘制 p通过echarts.init(dom, theme, options)

初始化； p通过setOption方法设置绘制的数据

vue中

<template>
  <div>
    <div ref="divRef"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

import * as echarts from 'echarts'

export default defineComponent({
  name: 'dashboard',
  setup() {
    const divRef = ref<HTMLElement>()

    onMounted(() => {
      // 1.初始化Echarts的实例
      // 第二个参数是主题，light是正常颜色  dark是深色  第三个参数是渲染器
      const echartInstance = echarts.init(divRef.value!, 'light', {
        renderer: 'svg'
      })
      // 2.编写配置文件
      const option = {
      //  可以去官网找
      }
      // 3.设置配置，并且开始绘制
      echartInstance.setOption(option)
    })

    return {
      divRef
    }
  }
})
</script>

<style scoped></style>