Echarts可视化图形-搭配案例·回顾学习echarts可视化图形，一个使用 JavaScript 实现的开源库。简单

官方文档：echarts.apache.org/zh/index.ht…

介绍
- 一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表
根据文档安装，引入 echarts.js
定义容器 <div id="main" style="width: 600px;height:400px;"></div>
通过echarts.init(document.getElementById('main'));方法初始化并关联main容器
配置项 option
- 文档：echarts.apache.org/zh/option.h…

常用的配置项

title（标题）
- text（文本）、textStyle（文本样式）、borderWidth（标题边框颜色圆角）、标题位置（left、top、right、bottom）
toolbox
- （Echarts提供的工具栏）：导出图片、数据视图、动态类型切换、数据区域缩放、重置等
tooltip
- trigger: 'item | axis | none',
  - item: 数据项触发
  - aixis: 坐标轴触发
  - none: 不触发
- axisPointer 坐标轴指示器配置
  - type
  - label
  - lineStyle
- formatter(params) {} 自定义内容，提示框浮层内容格式器，支持字符串模板和回调函数两种形式

tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        type: 'solid',
        color: '#cfcfcf',
      },
      label: {
        backgroundColor: '#333',
      },
    },
    formatter(params) {
      // console.log(params, 'params');
      return `<p style='color: #666;'>${params[0].axisValue}</p>
          <div style='color: #333;'>
            <span style="display:inline-block;
                        width:12px;
                        height:3px;
                        margin-bottom: 3px;
                        margin-right: 5px;
                        background: ${params[0].color};"></span>
            <span style='display:inline-block; width: 100px;'>减排量</span>
            ${params[0].value}
          </div>`;
    },
  },

legend
- data: [{name: '一线', icon: 'circle', textStyle: {...}}]
  - 图例，用于筛选series，需要与series配合使用）：1.legend中的data是一个数组；2.legend中的data的值需要与series数组中某组数据的name值保持一致
- top\left\bottom\right 设置图例标记的位置
- width\height\padding\algin...
- icon
- tooltip
- formatter 自定义内容

legend: {
    top: '2%',
    left: 'center',
    data: ['整体减排量趋势'],
    icon: 'rect',
    itemWidth: 20,
    itemHeight: 2,
    textStyle: {
      color: '#666',
    },
    lineStyle: {
      type: 'solid',
      color: '#5AAAF9',
    },
  },

grid 设置图表基于容器的位置

grid: {
    left: '3%',
    right: '2%',
    top: '15%',
    bottom: '17%',
  },

dataZoom
- type: 'inside | slider'
  - inside 设置图表内部区域可拖拽、滑动
  - slider 为图表提供滚动条，支持缩放、拖拽、滑动等
xAxis
- name x轴单位名
- type 坐标轴类型 value | category | time | log
- data x轴坐标轴数据
- axisLine 坐标轴轴线相关设置
- axisTick 坐标轴刻度相关设置

xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
      lineStyle: {
        color: '#999',
        width: 0.5,
      },
    },
  },

yAxis 同x轴相关配置

yAxis: {
    name: '单位：tCO₂e',
    type: 'value',
  },

series 坐标轴上图形的配置
- type 指定图的类型 line | bar | pie | ...
- name 当前图形的名称，和legend.data 对应
- data 图形数据
- symbol 图形标记 emptyCircle\circle\rect\none\...标记类型
- symbolSize 标记尺寸
- showSymbol 是否展示标记
- itemStyle 折线拐点标志的样式
- lineStyle 线条样式
- areaStyle 区域填充样式
  - color 通过次属性配置渐变等样式
- emphasis 图形高亮状态

series: [
    {
      name: '整体减排量趋势',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      symbolSize: 5,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: '#3A84FF',
          lineStyle: {
            color: '#3A84FF',
            width: 1,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(91, 182, 249, 0.3)',
                },
                {
                  offset: 0.8,
                  color: '#fff',
                },
              ],
            },
          },
        },
      },
    },
  ],

resize()
- window.onresize 监听浏览器窗口大小，发生变化时，调用eacharts实例等resize方法
geo 地图坐标系
parallel 平行坐标系
animation 动画
...