EChart使用心得（三）K线图折线图…
代码如下：数据改动，估计我最后在写一个多图联动就不搞了
var myChart = echarts.init(document.querySelector("#main"));
var option = {
title : {
text: '博雅数据'//左上角名字
},
tooltip : { //提示框
trigger: 'axis', //触发类性
formatter: function (params) {
var res = params[0].name;
for (var i = params.length - 1; i >= 0; i--) {
if (params[i].value instanceof Array) {
res += '
' + params[i].seriesName;
res += '
开盘 : ' + params[i].value[0] + ' 最高 : ' + params[i].value[3];
res += '
收盘 : ' + params[i].value[1] + ' 最低 : ' + params[i].value[2];
}
else {
res += '
' + params[i].seriesName;
res += ' : ' + params[i].value;
}
}
return res;
}
},
legend: {
data:['上证指数','成交金额(万)'] //图中的两个显示数据
},
toolbox: { //工具箱
show : true, //显示
backgroundColor: 'yellow', //工具箱的背景颜色
feature : { //启用功能，工具箱自定义功能回调处理
mark : {show: true}, //辅助线开关 总共三个开关
dataZoom : {show: true}, //框选区域缩放开关 两个开关
dataView : {show: true, readOnly: false}, //数据视图开关 readOnly为是否只读开关 一个开关
magicType: {show: true, type: ['line', 'bar']},
//动态类型转换 支持折线 柱状 堆积 平铺 type ['line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel']
restore : {show: true},
//表的还原
saveAsImage : {show: true} //IE8不支持
//保存为图片
}
},
dataZoom : { //图表下方的可拉缩控件
show : true, //是否显示
realtime: false, //缩放变化是否实时显示，在不支持Canvas的浏览器中自动强制为false
start : 0, //开始的百分比
backgroundColor : 'gray',//控件的背景色
end : 100 , //结束的百分比
handleSize : 38, //设置手柄的大小
showDetail : true, //缩放变化是佛显示定位详情 就是手柄是否有数字
zoomLock : false,//数据缩放锁，默认为false，当他为true时end start值保持不变
},
xAxis : [ //直角坐标系中横轴数组 数组中每一项代表一条横轴坐标轴，仅有一条时可省略数组，最多同时存在两条数组
{
type : 'category', //三种类型：类目型，时间性，数值型
boundaryGap : true, //空白策略
axisTick: {onGap:false}, //坐标轴上的小标签
splitLine: {show:false}, //分割线 默认显示
data : [ //类目型坐标轴文本标签数组，指定label内容，数组项通常为文本，\n指定换行
"2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29",
{ //单独设置样式
value:"2013/1/30",
textStyle : {
color:'red',
}
},
"2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6",
"2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20",
"2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27",
"2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6",
"2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13",
"2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20",
]
}
],
yAxis : [ //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数组。最多同时存在2条纵轴，单条纵轴时可指定安放于grid的左侧（默认）或右侧，2条同时存在时位置互斥，默认第一条安放于左侧，第二条安放于右侧。
{
type : 'value', //数值类型 需要指定数值区间，不指定时则自动计算数值范围
scale:true, //脱离0值比例，放大聚焦到最终min，max之间
splitNumber: 3, //分割段数，不指定时根据min max自动计算 X轴Y轴都可以
boundaryGap: [0.01, 0.01], //空白策略
splitLine:{show:false},//分割线
//boundaryGap ：当轴的类型为类目型，取值为TRUE或者false，false顶头
//当轴的类型为时间或者数字型，则取值数组["原始数据最小值与最终数据最小值的差"，"原始最大值与最终最大值的差"].
},
{
type : 'value',
scale:true,
splitNumber: 5,
splitLine: {show:false}, //分割线 默认显示
boundaryGap: [0.05, 0.05],
axisLabel: { //坐标轴文本标签
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
}
}
],
series : [ //驱动表生成的数据内容数组 ，数组中的每一项为一个系列的选项及数据
//折线数据
{
name:'成交金额(万)', //系列名称，如启用legend，该值将被legend.data索引相关
type:'line', //图表类型
yAxisIndex: 1, //yAxis坐标轴数组的索引，指定该系列数据所用的纵坐标轴
symbol: 'none', //标志图形类型 默认自动选择
itemStyle:{ //设置折线颜色
normal:{
color:"orange"
}
},
data:[
13560434, 8026738.5, 11691637, 12491697, 12485603,
11620504, 12555496, 15253370, 12709611, 10458354,
10933507, 9896523, 10365702, 10633095, 9722230,
9116529, 8128014, 7919148, 7566047, 6665826.5,
10225527, 11124881, 12884353, 11302521, 11529046,
11105205, 9202153, 9992016, 12035250, 11431155,
10354677, 10070399, 9164861, 9237718, 7114268,
7526158.5, 8105835, 7971452.5
],
markPoint : { //系列中的数据标注内容 就是一般标记最高点个最低点
symbol: 'emptyPin', //标注类型 就是显示为星星啊 水滴啊之类的
itemStyle : { //设置标记样式
normal : { //一般设置
color:'#1e90ff', //颜色
label : { //标注的文本
show:true, //文本是否显示
position:'top',//文本显示位置
formatter: function (param) { //文本内容
return Math.round(param.value/10000) + ' 万'
}
}
}
},
//标注的数据内容数组，每一项为一个对象，
data : [
{type : 'max', name: '最大值', symbolSize:5},
{type : 'min', name: '最小值', symbolSize:5}
]
//例如data: [
// {
// name: '最大值',
// type: 'max'
// },
// {
// name: '某个坐标',
// coord: [10, 20]
// }, {
// name: '固定 x 像素位置',
// yAxis: 10,
// x: '90%'
// },
// {
// name: '某个屏幕坐标',
// x: 100,
// y: 100
// }
// ]
},
markLine : { //图表标线
symbol : 'none', //标线的类型
itemStyle : {
normal : {
color:'red',
label : {
show:true,
formatter: function (param) {
return Math.round(param.value/10000) + ' 万'
}
}
}
},
data : [
{type : 'average', name: '平均值'}
]
}
},
//K图数据
{
name:'上证指数',
type:'k',
itemStyle:{
normal:{
color:"red",
color0:"lightgreen"
}
},
data:[ // 开盘，收盘，最低，最高
[2320.26,2302.6,2287.3,2362.94],
[2300,2291.3,2288.26,2308.38],
[2295.35,2346.5,2295.35,2346.92],
[2347.22,2358.98,2337.35,2363.8],
[2360.75,2382.48,2347.89,2383.76],
[2383.43,2385.42,2371.23,2391.82],
[2377.41,2419.02,2369.57,2421.15],
[2242.26,2210.9,2205.07,2250.63],
[2190.1,2148.35,2126.22,2190.1]
]
}
]
};
myChart.setOption(option);