ECharts 学习和使用——一切都在官网文档里

最近做项目用到了ECharts 绘制图表,这里记录下用到的资料。当前ECharts已经到了4.X版本,推荐直接使用最新版本,官方的文档和说明已经相当完善,下边简单说下学习过程中会用到的页面。详细内容出门右转官网~

1、了解ECharts 特性(https://echarts.baidu.com/feature.html

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。

 

2、5 分钟上手ECharts(https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

获取 ECharts: 你可以通过以下几种方式获取 ECharts。

  1. 官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。

  2. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

  3. 通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts

  4. cdn 引入,你可以在 cdnjsnpmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本

3、ECharts 术语速查手册(https://echarts.apache.org/zh/cheat-sheet.html

快速了解功能名称,帮助定位到配置项手册

4、在线定制包体(https://echarts.baidu.com/builder.html

可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置

 

已标记关键词 清除标记
因为工作需要,公司最近需要我们去调用一下echarts。 因为以前没有用过echarts,只好先去学习一下。 今天在测试echarts时却发现了一个问题: 官网发的大部分案例都可以直接复制执行,还有一些是需要json文件的暂且不论。 今天测试的这个,我看过代码没有调用json文件的记录,却还是显示一片空白。 echarts环境:echarts用的是官网的2.08M的源码包,浏览器是 firfox. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script src="echarts.js"></script> </head> <body> <div id="charts" style="position: absolute;width: 80%;height: 80%;"> </div> </body> <script> var charts=echarts.init(document.getElementById('charts')); //为了代码可读性,我把系统给的数据全部以 data 代替 var data0 = [ data ]; var data = [ data ]; // See https://github.com/ecomfe/echarts-stat var myRegression = ecStat.regression('logarithmic', data); myRegression.points.sort(function(a, b) { return a[0] - b[0]; }); option = { legend: { data: ['1990', '2015'], bottom: 20 }, title: { text: '1990 and 2015 per capita life expectancy and GDP', subtext: 'By ecStat.regression', sublink: 'https://github.com/ecomfe/echarts-stat', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { top: 80, bottom: 90 }, xAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, }, series: [{ name: '1990', type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' }]) } }, data: data0 }, { name: '2015', type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' }]) } }, data: data1 }, { name: 'line', type: 'line', lineStyle: { normal: { color: '#2f4554' } }, smooth: true, showSymbol: false, data: myRegression.points, markPoint: { itemStyle: { normal: { color: 'transparent' } }, label: { normal: { show: true, position: 'left', formatter: myRegression.expression, textStyle: { color: '#333', fontSize: 14 } } }, data: [{ coord: myRegression.points[myRegression.points.length - 1] }] } }] }; charts.setOption(option); </script> </html> ``` 如果我数据的修改影响了判断,这是源码--->[Echarts代码源码](https://echarts.baidu.com/examples/editor.html?c=scatter-logarithmic-regression "")
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页