• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 前段时间利用Echarts做了一个前端数据可视化的项目 简单做一下笔记

Echarts的运用步骤

1.下载并引入Echarts.js文件

2.准备一个具备大小的DOM容器

3.初始化Echarts实例对象

var myChart = echarts.init(document.querySelector("DOM容器"));

4.指定配置和数据（option）

5.将配置项设置给echarts实例对象

myChart.setOption(option);

6.自适应

window.addEventListener('resize', function () {
        myChart.resize();
    })

指定配置和数据中的tips

1.title:标题组件

2.legend: 图例组件，可以通过top、left等去设置图例的位置，itemWidth/Height 可设置图里标记的图形高度

3.grid：直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

4.字符串模板:{a},{b},{c},{d},{e}

5.xAxis:直角坐标系 grid 中的 x 轴,lineStyle.color:坐标轴线线的颜色 渐变：

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}

xAxis.axisTick坐标轴刻度相关设置

xAxis.axisLine:坐标轴轴线相关设置

xAxis.axisLabel:坐标轴刻度标签的相关设置

xAxis.splitLine:坐标轴在 grid 区域中的分隔线。