Git-数据可视化/ECharts图表使用

一.数据可视化

数据可视化:

1.借助图形手段, 清晰传达信息的表现方式

2.把枯燥的数字数据, 转换成图形, 数据特点更突出

中文官网链接地址: https://echarts.apache.org/zh/index.html

二.ECharts-基础学习

1. 引入ECharts的js文件

   https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

2. 准备一个具备宽高的DOM容器

   <div id="main" style="width: 600px; height: 400px"></div>
   

3. 初始化Echarts实例

   let myEchart = echarts.init(document.querySelector('#main'))
   

4. 准备配置项

   let option = {
       title: {
           text: 'ECharts 入门示例'
       },
       tooltip: {},
       legend: {
           data: ['销量']
       },
       xAxis: {
           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
       },
       yAxis: {},
       series: [
           {
               name: '销量',
               type: 'bar',
               data: [5, 20, 36, 10, 10, 20]
           }
       ]
   }
   

5. 给echarts实例配置进入, 即可得到一个相关的柱形图表

   myEchart.setOption(option)