vue echarts数据变化重新渲染_数据可视化之echarts在Vue中的使用

数据可视化的本质是将数据通过各种视觉通道映射成图形，可以使得用户更快、更准确的理解数据.

一、为什么选择echarts:

1. 简单上手容易
2. 满足绝大部分的开发需要
3. 在可视化库中有较好的体验和口碑

二、在Vue中使用echarts

1.直接引入echarts: 需要提前给渲染的容器设定宽高度,否则不能正常显示

// 安装echarts项目依赖
npm install echarts --save
// 或者使用yarn安装,速度优于npm
yarn install echarts --save

<template>
<div id="app">
   <div id="chart" style="width:400px;height:400px"></div>
</div>
</template>
<script lang="ts">
// 在main.ts中全局引入echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    
    title: {
    
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
    
        data: ['衬衫', '羊毛衫', '雪纺衫