博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手把手教你使用ECharts绘制可视化图表
阅读量:7060 次
发布时间:2019-06-28

本文共 2270 字,大约阅读时间需要 7 分钟。

1.在官网,ECharts的源码和示例文件。

2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目js目录文件夹下。

3.在页面的顶端引入模块加载器esl.js。

4.为ECharts准备一个具备大小的Dom

5.为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径。

require.config({        paths:{            echarts:'./js/echarts',            'echarts/chart/bar' : './js/echarts',            'echarts/chart/line': './js/echarts'        }    });

6.动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径

require(        [            'echarts',            'echarts/chart/bar',            'echarts/chart/line'        ],        function(ec) {            var myChart = ec.init(document.getElementById('main'));            var option = {                tooltip : {                    trigger: 'axis'                },                legend: {                    data:['蒸发量','降水量']                },                toolbox: {                    show : true,                    feature : {                        mark : true,                        dataView : {readOnly: false},                        magicType:['line', 'bar'],                        restore : true,                        saveAsImage : true                    }                },                calculable : true,                xAxis : [                    {                        type : 'category',                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']                    }                ],                yAxis : [                    {                        type : 'value',                        splitArea : {show : true}                    }                ],                series : [                    {                        name:'蒸发量',                        type:'bar',                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]                    },                    {                        name:'降水量',                        type:'bar',                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]                    }                ]            };                                                         myChart.setOption(option);        }    );

7.效果图

8.注意事项

  在实际项目中,ECharts图标的横坐标和纵坐标,均是在后台返回的数据中的得到的。在前端动态设置data数值时,data的类型必须是数组,EChars才能展现出图标的效果来。

转载地址:http://fjrol.baihongyu.com/

你可能感兴趣的文章
ActiveMQ 报错 Temporary Store limit is 51200 mb
查看>>
【转】网络编程socket基本API详解
查看>>
查找某关键字在目标字符串中出现次数及位置
查看>>
新浪微博iOS版SDK“宝玉XP”框架学习笔记
查看>>
Jmeter集合点
查看>>
webSphere中文日志乱码,设置日志编码方法
查看>>
单元测试WebForm的UI逻辑及文件上传
查看>>
java操作excel进行导入导出
查看>>
黄聪:wordpress如何获取访问的网站的cookie值
查看>>
js将汉字转为相应的拼音
查看>>
不一样的大小写转换
查看>>
图论基础概念
查看>>
【电脑硬盘怎样才能用的长久 它的保养建议大分享】
查看>>
es6+最佳入门实践(5)
查看>>
LevelList Drawable用法
查看>>
C++ 定义全局数组
查看>>
linux操作系统的目录以及用户权权限的管理
查看>>
GAN
查看>>
文件操作
查看>>
吃货联盟项目
查看>>