ECharts是什么?一个纯JavaScript图表库。ECharts缩写来自Enterprise Charts商业级数据图表一个纯Javascript的图表库可以流畅的运行在PC和移动设备上兼容当前绝大部分浏览器IE6/7/8/9/10/11chromefirefoxSafari等底层依赖轻量级的Canvas类库ZRender提供直观生动可交互可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验赋予了用户对数据进行挖掘、整合的能力。ECharts下载地址: https://www.echartsjs.com/en/index.html也可以根据自己需要: 下载echarts.min.js http://echarts.baidu.com/dist/echarts.min.js如何引入 ECharts方法一: 用src引入所需要的echarts.min.js 的位置!DOCTYPE html html head meta charsetutf-8 !-- 引入 ECharts 文件-- script srcecharts.min.js/script /head /html方法二: npm 安装 ECharts在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save引入 ECharts通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。var echarts require(echarts); // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); // 绘制图表 myChart.setOption({ title: { text: ECharts 入门示例 }, tooltip: {}, xAxis: { data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] });ECharts示例官网例子:很全, 所需要的都可以查得到 https://www.echartsjs.com/examples/en/index.html在这里举一个例子:!DOCTYPE html html head meta http-equivContent-Type contenttext/html; charsetUTF-8 titleECharts/title !-- 引入 echarts.js -- !-- script srcecharts.min.js/script -- !-- -- script srcjs/echarts.min.js/script /head body !-- 为ECharts准备一个具备大小宽高的Dom -- div idmain stylewidth: 600px;height:400px;/div script typetext/javascript // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); // 指定图表的配置项和数据 option { title: { text: ECharts例子 }, tooltip: {}, legend: { data:[销量] }, xAxis: { data: [项目1,项目2,项目3,项目4,项目5,项目6] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); /script /body /html运行后界面:(简洁大方~ 非常好看)按需引入 ECharts 图表和组件默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包因此体积会比较大如果在项目中对体积要求比较苛刻也可以只按需引入需要的模块。例如上面示例代码中只用到了柱状图提示框和标题组件因此在引入的时候也只需要引入这些模块可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。// 引入 ECharts 主模块var echarts require(‘echarts/lib/echarts’);// 引入柱状图require(‘echarts/lib/chart/bar’);// 引入提示框和标题组件require(‘echarts/lib/component/tooltip’);require(‘echarts/lib/component/title’);// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(‘main’));// 绘制图表myChart.setOption({title: { text: ‘ECharts 入门示例’ },tooltip: {},xAxis: {data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]},yAxis: {},series: [{name: ‘销量’,type: ‘bar’,data: [5, 20, 36, 10, 10, 20]}]});对于另一个流行的模块打包工具 browserify 也是同样的用法这里就不赘述了。loading 动画如果数据加载时间较长一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了因此需要一个 loading 的动画来提示用户数据正在加载。ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。myChart.showLoading();$.get(‘data.json’).done(function (data) {myChart.hideLoading();myChart.setOption(…);});移动端自适应ECharts 工作在用户指定高宽的 DOM 节点容器中。ECharts 的『组件』和『系列』都在这个 DOM 节点中每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时这种方式并不能自动避免组件重叠的情况尤其在移动端小屏的情况下。另外有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。为了解决这个问题ECharts 完善了组件的定位设置并且实现了类似 CSS Media Query 的自适应能力。ECharts组件的定位和布局大部分『组件』和『系列』会遵循两种定位方式left/right/top/bottom/width/height 定位方式这六个量中每个量都可以是『绝对值』或者『百分比』或者『位置描述』。绝对值单位是浏览器像素px用 number 形式书写不写单位。例如 {left: 23, height: 400}。百分比表示占 DOM 容器高宽的百分之多少用 string 形式书写。例如 {right: ‘30%’, bottom: ‘40%’}。位置描述可以设置 left: ‘center’表示水平居中。可以设置 top: ‘middle’表示垂直居中。这六个量的概念和 CSS 中六个量的概念类似left距离 DOM 容器左边界的距离。right距离 DOM 容器右边界的距离。top距离 DOM 容器上边界的距离。bottom距离 DOM 容器下边界的距离。width宽度。height高度。在横向left、right、width 三个量中只需两个量有值即可因为任两个量可以决定组件的位置和大小例如 left 和right 或者 right 和 width 都可以决定组件的位置和大小。 纵向top、bottom、height 三个量和横向类同不赘述。center / radius 定位方式center是一个数组表示 [x, y]其中x、y可以是『绝对值』或者『百分比』含义和前述相同。radius是一个数组表示 [内半径, 外半径]其中内外半径可以是『绝对值』或者『百分比』含义和前述相同。在自适应容器大小时百分比设置是很有用的。横向horizontal和纵向verticalECharts的『外观狭长』型的组件如 legend、visualMap、dataZoom、timeline等大多提供了『横向布局』『纵向布局』的选择。例如在细长的移动端屏幕上可能适合使用『纵向布局』在PC宽屏上可能适合使用『横向布局』。横纵向布局的设置一般在『组件』或者『系列』的 orient 或者 layout 配置项上设置为 ‘horizontal’ 或者’vertical’。