ECharts
首先是使用方法,
这位网友写得已经很清楚了,转载了 ! ECharts使用心得
大概的发一下一页多图的加载方法,这也是网上收集整理的,并非原创!
require.config({ paths: { echarts: '/js/echarts', 'echarts/chart/bar': './js/echarts', 'echarts/chart/line': './js/echarts' } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], DrawCharts ); function DrawCharts(ec) { FunDraw1(ec); FunDraw2(ec); } function FunDraw1(ec) { //--- 柱状图 --- var myChart = ec.init(document.getElementById('chartArea1')); var strs = new Array(); strs = $("#DataNo1").val().split(",") myChart.showLoading({ text: "程序猿拼命加载中..." }); myChart.hideLoading(); myChart.setOption({ title: { text: "教师对家校合作的认识" }, tooltip: { trigger: 'axis' }, toolbox: { show: false }, calculable: true, xAxis: [ { type: 'category', data: ['教师与家长紧密合作', '家长按照教师的要求做', '教师按家长的要求教', '在学校教师管在家家长管'], axisLabel: { show: true, interval: 0 } } ], yAxis: [ { type: 'value', splitArea: { show: true }, max: 100, axisLabel: { show: true, formatter: '{value} %' } } ], series: [ { name: 'stepday.com', type: 'bar', barWidth: 30, itemStyle: { normal: { borderRadius: 7, label: { show: true, formatter: '{c}%', textStyle: { fontSize: '12', fontFamily: '微软雅黑', fontWeight: 'bold' } } } }, data: [strs[0], strs[1], strs[2], strs[3]] } ] }); } function FunDraw2(ec) { //--- 柱状图 --- var myChart = ec.init(document.getElementById('chartArea2')); var strs = new Array(); strs = $("#DataNo2").val().split(",") myChart.showLoading({ text: "程序猿拼命加载中..." }); myChart.hideLoading(); myChart.setOption({ title: { text: "教师对家校合作的态度" }, tooltip: { trigger: 'axis' }, toolbox: { show: false }, calculable: true, xAxis: [ { type: 'category', data: ['积极主动安排活动', '接受学校的安排,做必须做的工作', '不太愿意接受学校活动的安排', '很不愿意进行家校合作'], axisLabel: { show: true, interval: 0, rotate: -10 } } ], yAxis: [ { type: 'value', splitArea: { show: true }, max: 100, axisLabel: { show: true, formatter: '{value} %' } } ], series: [ { name: 'stepday.com', type: 'bar', barWidth: 30, itemStyle: { normal: { borderRadius: 7, label: { show: true, formatter: '{c}%', textStyle: { fontSize: '12', fontFamily: '微软雅黑', fontWeight: 'bold' } } } }, data: [strs[0], strs[1], strs[2], strs[3]] } ] }); }
这里写了两个图标一起加载的方法,其实就是将一个部分拆分就行了。
另外官方文档也十分的详细,各种属性都有说明和例子,
ECharts官网: http://echarts.baidu.com/
相关推荐
实现了一个地图加载的demo,感觉行的话就行,共同学习进步嘛,积分就不多要了
背景:动态加载多条折线图,折线图条数不确定 页面效果: 页面代码 //气象数据 function serchQx(beginTime, endTime, str, parameter) { $(#rr).html();//将循环拼接的字符串插入下拉列表 var t = $(#...
2、echarts多条折线图动态分层 var xData = param.xData; var data = param.yData let option = []; let num =param.num ? param.num : 0; let max = num ? num *100 : 100; //处理精度丢失问题 但不是最佳...
这个方法可以加载单个省份地图。ECharts官方不再提供矢量地图数据,详见 http://echarts.baidu.com/download-map.html。使用方法:运行nginx.exe,访问 http://localhost:9005/index.html 即可
echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图
echarts动态加载关系图示例,三层结构,中心关系子层,子层再次关系子层。echarts动态加载关系图示例,三层结构,中心关系子层,子层再次关系子层。
Echarts基础折线图源代码,对于数据源的读取有两种方式:直接定义数据源和异步加载数据,异步加载数据以读取json/js数据为主。
台湾echarts地图资源
Echarts例子(多图)
JQ JS javascript echarts 多图表 多曲线 多柱状图 多饼图 多仪表盘 加载 多图表加载
echarts前端实现后台请求加载多组动态曲线实例,时间做X轴,曲线组数可动态加载,曲线数据可动态加载。 附具体注释
Echarts通过Ajax实现动态数据加载,Echarts通过Ajax实现动态数据加载。
广西省echarts地图资源
echarts多维条形图 柱状图作图,来自官网代码,图形化 展示 大数据 信息
根据省份位置,在Echarts 地图上画饼图, 可点击放大单个饼图
echarts省市区离线地图,
使用html2canvas,将页面多个echarts图转成图片下载,页面实例可直接打开运行,修改了所需要的分数
echarts柱形图异步加载(可直接执行).zip
Echarts地图 东莞市地图json
设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,柱形图显示数值,以及设置隐藏一段方案(关联和不关联),鼠标移动上去显示的提示内容,动态改变...