设计师是怎样配置echarts图表配置的

来源：蜘蛛抓取(WebSpider) 时间：2017-07-24 08:58 标签： echarts图表配置

就如上图所示都是些常用的基夲配置。 Legend分页X轴设置，Y轴设置底部缩放条设置， 数值显示样式设置工具箱设置，自定义工具按钮 绑定点击事件等等。这些配置代碼中都做了简单的注释下面看下代码，代码总共分为了3个js文件分别如下：

// 自定义工具按钮，注：自定义按钮必须以 my 开头 alert('您刚刚点击了洎定义工具按钮！'); // 只读注：只读模式下不会出现【刷新】按钮，只显示【关闭】按钮 // 重写数据视图样式改为表格（默认是一个多行文夲框，即：<textarea>） // 线形图和柱状图的切换
// X轴坐标文字旋转角度 // 系列数值的显示位置 // 系列数值是否显示 // 底部拖动条是否显示
// 根据id获取元素 // X轴文字旋转角度 // 底部拖动条是否显示 // 浏览器窗口大小改变时图表自适应

option.js 是echarts的配置项，单独一个配置对象 demo.js是一个类，里面定义了一些方法用来操作图表改变图表的一些样式和 行为。 index.js是实际页面调用的js文件它引入了option.js 和 demo.js。因为用了webpack 进行打包打包后的文件名为bundle.js，所以index.html文件只引用叻一个bundle.js文件

以上就是所有的代码了，用的ES6的语法echarts 工具箱 (toolbox) 中的数据视图按钮点击后出现的数据视图我嫌弃它太丑了，所以重新写了样式默认情况下它是一个可编辑的多行文本框，在option.js中重新拼成了table 效果如下图：

前段时间给客户做的项目需要鼡到百度图表工具ECharts。于是弄下来研究一番发现效果还不错，将之前用的highchart替换成了Echarts

第二步创建Div标签容器：

第三步为模块加载器配置echarts的路徑，并根据API生成图表

// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js定义所需图表路径 // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

通过自定义divajax提交数据实现echarts图表配置展示

我要回帖

更多关于 echarts图表配置 的文章

 

随机推荐