数据可视化Echarts

什么是ECharts呢？

官方的解释是：一个基于 JavaScript 的开源可视化图表库

官方网址 

一、使用步骤

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

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

•   在 ECharts 的 GitHub 获取；

•   通过 npm 获取 echarts

  npm install echarts --save
  

•  通过 jsDelivr 等 CDN 引入

第二步：引入Echarts

 在页面中引入

import * as echarts from 'echarts'

第三步：初始化Echarts对象，并且设置配置进行绘制 

• 通过echarts.init(dom, theme, options)初始化；
• 通过setOption方法设置绘制的数据；

代码演示：

<template>
  <div class="dashboard">
    <div ref="divRef" :style="{ width: '600px', height: '500px' }"></div>
  </div>
</template>

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

// 1.在页面中引用
import * as echarts from 'echarts'

export default defineComponent({
  name: 'dashboard',
  setup() {
    const divRef = ref<HTMLElement>()
    onMounted(() => {
      // 2.初始化echarts的实例
      const echartInstance = echarts.init(divRef.value!)
      // 3.编写配置文件
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 4.设置配置，并且开始绘制
      echartInstance.setOption(option)
    })
    return {
      divRef
    }
  }
})
</script>

<style scoped></style>

 效果：

 二、canvas vs svg

canvas vs svg性能测试 

canvas vs svg的选择 

 总结：大多数场景下选择svg