echarts记录

记录一下echarts的学习过程

测试

安装

官网下载不提了，引入后新建div 设置id和宽高，script中注册：
var myChart = echarts.init(document.getElementById(‘groupA’));
然后定义数据及样式
var option ={…};
最后推送样式回元素
myChart.setOption(option);

基本样式

option = {
tooltip : { ///鼠标悬浮标签，可设置样式
trigger: ‘axis’,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : ‘shadow’ // 默认为直线，可选为：’line’ | ‘shadow’
}
},
legend: { //图例，与series中元素的name对应匹配
data:[‘First’, ‘Secend’, ‘Third’,’Forth’]
},
toolbox: {///中间的工具盒子，可以放缩放、还原、保存图片等工具按钮
left: ‘center’,
feature: {
dataZoom: {
yAxisIndex: ‘none’
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{ ///数据缩放插件 可以拖拽、滚轮等
startValue: ‘2014-06-01’
}, {
type: ‘inside’
}],
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
visualMap: { ///增加可视化控制图例，规定了右上角位置，用上下限的形式规定颜色信息。
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 50,
color: ‘#096’
}, {
gt: 50,
lte: 100,
color: ‘#ffde33’
}, {
gt: 100,
lte: 150,
color: ‘#ff9933’
}, {
gt: 150,
lte: 200,
color: ‘#cc0033’
}, {
gt: 200,
lte: 300,
color: ‘#660099’
}, {
gt: 300,
color: ‘#7e0023’
}],
outOfRange: {
color: ‘#999’
}
},
xAxis : [ //x轴内容
{
type : ‘value’
}
],
yAxis : [ //Y轴内容
{
type : ‘category’,
axisTick : {show: false},
data : [‘Australia’,’Denmark’,’France’,’Peru’]
}
],
series : [ //数据系列，其中的data是数据。type决定图表类型
{
name:’First’,
type:’bar’,
stack: ‘总量’,
markLine: { 通过数值划直线 本例子是在type:line类型下
silent: true,
data: [{
yAxis: 50
}, {
yAxis: 100
}, {
yAxis: 150
}, {
yAxis: 200
}, {
yAxis: 300
}]
},
label: {
normal: {
show: true,
position: ‘inside’
}
},
data:[200, 170, 240, 244]
}
]
}