初学
PartA - 基本框架
var myCharts = echarts.init (DOM),将charts放入一个div中
var option = {
}
myCharts.setOption(option);
基本格式如上,如果是获取JSON数据文件,则:
$.get('…… .json', function (data) {
option = {
}
myCharts.setOption(option);
}
重点option中设置图标详细参数。
option = {
background: , //全局参数北京
legend: {},
tooltip: {},
grid: [{right: bottom:},{}], //设置size = %
xAxis: [{type: , gridIndex: , name: , boundaryGap: true/flase , axisLabel: {rotate: , interval: },{}] ,
yAxis: [{},{}] , //同上
dataset: {
dimensions: [ //几个维度
'',
{name: '', type: ''}
],
source: data //读取的数据来源
}
visualMap:{ 详见visualMap }
series:[
{
label:{ 见PartB },
labelLine:{ 见PartB },
itemStyle{ 见PartB },
type: '',
symbolSize: symbolSize,
xAxisIndex: , //放在哪个index中
yAxisIndex: ,
encode: { //作为映射,坐标系、标签: 维度名(string)或维度的序号(number),可用数组指定≥1个维度
x: '',
y: '',
tooltip: [0, 1, 2, 3, 4]
}
},
]
}
图形的type 有 scatter, bar, pie, line
数据的type 有 category, value
维度类型 type 有 number, ordinal (如果需要使用string), float, int, time
Part B - 正常和hover的不同显示
normal: { Part C },
emphasis:{ Part C },
Part C - 不同Style
textStyle: {},
lineStye: {},
shadowBlur:
shadowColor:
对于Style,可以使用visualMap进行映射,即:
VisualMap
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#D7DA8B', '#E15457']
}
},