Echarts 入门（数据可视化）什么是数据可视化什么是Echarts使用Echarts生成简单柱形图获取echarts

什么是数据可视化

数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的
各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析
主要是借助于图形化手段，清晰有效地传达与沟通信息

什么是Echarts

ECharts，一个使用JavaScript实现的开源可视化库，底层依赖矢量图形库ZRender，可定制的数据可视化图表
ECharts 提供了常规的折线图、柱状图、散点图、饼图，用于统计的盒形图，用于地理数据可视化的地图等等
ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形

使用Echarts生成简单柱形图

获取echarts

方法一
从BootCDN中引入Echarts
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

window.echarts                  使用全局变量echarts

方法二
yarn global add parcel-bundler   安装parcel
parcel src/index.html            使用parcel运行html
yarn add echarts                 安装echarts
yarn add --dev @types/echarts    安装echarts的类型

import echarts from 'echarts' 或者 var echarts = require('echarts')  使用echarts

使用echarts

在HTML中准备echarts显示区域
<body>
  <div id="main" style="width: 600px;height:400px;"></div>     //为echarts准备具有宽高的DOM
  <script src="main.js"></script>
</body>

在main.js准备echarts所需要的数据
import echarts from 'echarts'

const myChart = echarts.init(document.getElementById('main')); //初始化echarts
const option = {                                               // 指定图表的配置项和数据
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};
myChart.setOption(option);                               // 使用刚指定的配置项和数据显示图表

一个简单的柱形图就生成了 Echarts常用功能

换主题
echarts.init(xxx,'dark') 黑色主题
const main = document.getElementById('main')
const myChart = echarts.init(main, 'dark');

修改样式，线和提示等
series: [{
    lineStyle: {
      background: 'blue'
    },
    itemStyle: {borderWidth:10},
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]

详细功能查看：Echarts 术语速查手册

Echarts 更新数据

把要修改的数据，再次setOption就行，echarts会自动找出差异，更新图表

loadMoreButton.addEventListener('click', ()=>{
  const key = createKey()
  const value = createValue()
  xData = [...xData, key]
  values = [...values, value]
  myChart.setOption({
    xAxis:{
      data:xData
    },
    series:[{
      data:values
    }]
  })
})

如果数据是从服务器中下载的，得到数据后setOption；使用setTimeout模拟加载数据,3秒后下载

阻挡用户一直点击按钮，只触发一次，使用isloading

let isLoading = false
loadMoreButton.addEventListener('click', ()=>{
  if(isLoading === true) {return}         //阻挡乱点击
  myChart.showLoading()                   //加载动画开始
  isLoading = true
  setTimeout(() =>{
    const key = createKey()
    const value = createValue()
    xData = [...xData, key]
    values = [...values, value]
    myChart.setOption({
      xAxis:{
        data:xData
      },
      series:[{
        data:values
      }]
    })
    myChart.hideLoading()                 //加载动画结束
    isLoading = false
  },3000)
})

Echarts点击事件使用on（用户可以跟图表交互）

myChart.on('click', (e) =>{       e表示事件所有信息，任意名字
  console.log(e.name);
  console.log(e.dataIndex);
  console.log(e.data);
  window.open(`http://www.baidu.com/?time=${e.name}`)
})

更多案例点击：Echarts 官方实例