今天找了半天资料感觉收获甚少,但是还是想将自己的思路理一下,日后看的时候希望能记住更多,理得更清
刚开始看的时候,直接到官网看了教程,前面还基本认真后面就有点马虎了;看完教程大概知道怎么布置环境,怎么才能画出图形出来。后面以为就是各种复制模板图形就可以了,然后看了一下API和配置项手册,特别是配置项手册参数太多,但是也有规律可循,主要用到的也就几个;
先写个大纲,大概一个图形会包括哪些主要的参数
1、我后来接到的任务是写4个除了位置颜色数据不同其他参数都相同的柱状图,一个柱状图有两个数据重叠;刚开始有点懵逼,没有完全一样的实例;后面通过查询各种相关参数做出单个的柱状图和psd图有80%的相似度;
2、不先说细节,但后来问题出来了,怎么做4个呢,A、一个div写四个柱状图还是4个div写4个柱状图;B、代码的可复用性怎么复用,能不能像插件一样通过id就可以更改参数达到完美效果‘;这种效果目前也没有找到,但是就总结几个我看过的一些情况:
1、数据分离,将option中的数据提取出来放到data的数组或者是变量里面,变量里面用key的方式提取
var builderJson={
charts:{
'name':num
}
}
yAxis: [{
type: 'category',
data: Object.keys(builderJson.charts)
}],
series: [{
type: 'bar',
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}]
数组
var datas=[
[123],[456],[789]
]
series: [{
type: 'bar',
data:datas[0]
}]
数组直接调用,
2、遍历画图可以通过for循环或者是for-each循环的方式将定义图形的时候的必须改变的变量设置为空数组var series=[],然后将这个数组放到循环里面,同时用push方法向里面添加需要的用到的实际的参数;后期定义option的时候通过将前面循环中的参数赋值给这里的参数,后面对这个div setOption(option);就可以了eg;模仿别人的一个div多个极坐标图形的案列,自己跟着写了一遍,极坐标需要算法,不然后面出来的图形不好看,我随便弄了一个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>极坐标</title> <script src="js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 1200px;height:800px;"></div> <script type="text/javascript"> /*var echarts = require('echarts');*/ // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var data = []; for(var i=0;i<2;i++){ data[i]=[]; } for (var i = 0; i <= 100; i++) { var t = i / 180 * Math.PI; /* var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));*/ data[0].push([Math.sin(2 * t) * Math.cos(2 * t), i %360]); data[1].push([Math.sin(4* t) * Math.cos(4 * t), i %360]); } var title=[]; title.push("ρ=sin(θ*4/5)"); title.push("ρ=sin(θ*4/5)"); var polar=[]; var angleAxis =[]; var radiusAxis = []; var series=[]; for(var i=0;i<2;i++){ polar.push({ center: [15 + 24 * (i % 4) + '%', (15+ 24 * Math.floor(i/ 4)) + '%'], radius:'26%' }); radiusAxis.push({ show: false, polarIndex:i, min: 0 }); angleAxis.push({ polarIndex:i,//有多个图形的时候使用 type: 'value', startAngle: 0 }); series.push({ polarIndex: i, coordinateSystem: 'polar', name: title[i], type: 'line', showSymbol: false, label:{ normal:{ show:true, position:'bottom' } }, data: data[i] }) } option = { title: { text: '极坐标双数值轴', x:'center' }, legend: { data: ['line'] }, polar: polar, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, angleAxis: angleAxis, radiusAxis: radiusAxis, series:series }; myChart.setOption(option); </script> </body> </html>3、通过在写代码的时候直接将参数写到数组中的方法也可以
eg:类似这样
title: [ {//标题 show: true, text: '现业A:', left: '20px', top: '10%', textStyle: { color: '#90fffe', fontSize: 30 } }, {//标题 show: true, text: '现业B:', left: '60%', top: '10%', textStyle: { color: '#90fffe', fontSize: 30 } },
4、有一个重写option的方法,但是感觉和重新定义一个option1没什么区别,这里我就舍弃了
5、legend图例的显示与隐藏(legend图例进入页面显示的个数)
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['iphone3','iphone4','iphone5'],
- selected: {
- 'iphone3' : false,
- 'iphone5' : false,
- //不想显示的都设置成false
- }
- }