Echarts小结

  寒假初步了解了echarts的内容，学会了制作简单的图表，了解了echarts官网给的一些示例。下面主要讲一些echarts的基本内容 。

ECharts 特性介绍

    Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
    ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

丰富的图表类型

    ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
    你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

多个坐标系的支持

    ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。

1.柱状图的实现

柱状图

第一步：初始化一个具有宽高的盒子。

第二步：引入echarts的js文件

第三步：进行js初始化配置

//表示要在id为main的盒子中绘制图片
var dom = document.getElementById('main');
//表示对echarts图表进行初始化
var echart = echarts.init(dom);
//options表示进行基本的配置项配置
var options = {
    xAxis: {
        data: ["语文","数学","英文","地理","生物","化学"]
    },
    yAxis: {
        type:"value"
    },
    series: [{
        type: 'bar',//line为折线图，scatter为散点图
        data:[90, 77, 80, 66, 78, 85]
    }]
}
//重新绘制
echart.setOption(options);

xAxis：表示直角坐标的x轴
yAxis：表示直角坐标的y轴
series：表示表示展示的数据，这里展示的是一个柱状图，通过type:“bar”来控制。
（对于坐标轴的介绍以及标题组件、极坐标系、雷达图坐标系组件、地理坐标系组件等的相关内容在官网->文档->配置项都有所介绍）
由于echarts官网的提供的地图工具不能使用，我找到一个有相同功能的网址
地图数据在线生成工具：http://geojson.io/#map=10/34.1607/108.7852
2、散点图和折线图的实现
做好了一个柱状图，只要把series中的配置项type类型改为scatter就变成散点图，把type类型改为line就变为折线图。

折线图

散点图

可以通过symbol属性将散点图的点改为一个图案。