[JavaScript知识库]数据可视化

1.为了清晰有效地传递信息，数据可视化可使用统计图形、图表、信息图表其他工具；

2.可以使用点、线或条，对数字数据进行编码；

3.数据可视化让我们可以更加清晰的去认识、理解、表达数据

前端可视化工具

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

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

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

3D 可视化：three.js

使用Echarts 的步骤

第一步：安装：

npm install echarts --save

第二步： 引入Echarts

import * as echarts from 'echarts'

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

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

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

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

export default defineComponent({
  name: 'dashboard',
  setup() {
const diyRef=ref<HTMLElement>()
//1.初始化
onMounted(()=>{
  const myEchart=echarts.init(diyRef.value!)
  // 2.编写配置化文件
  var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 3.设置配置，并且开始绘制
      myEchart.setOption(option);
})
    return {
      diyRef
    }
  }
})
</script>