Echarts

Echarts是什么

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

ECharts 安装

独立版本

https://cdn.staticfile.org/echarts/4.7.0/echarts.js

使用 CDN 方法

https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

NPM 方法

npm install echarts --save

基本实例

// 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });

配置语法

第一步：创建 HTML 页面，引入 echarts.min.js

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器

 第三步: 设置配置信息（ECharts 库使用 json 格式来配置）

title  图表配置标题

tooltip  提示信息

legend 图例组件

xAxis X 轴

yAxis Y 轴

series 系列列表（每个系列通过 type 决定自己的图表类型）

完整实例

 // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
 
 // 指定图表的配置项和数据
 var option = {
     title: {
         text: '第一个 ECharts 实例'
     },
     tooltip: {},
     legend: