代码解释如下：数据减去了十分之九
var myChart = echarts.init(document.querySelector("#main"));
var option = {
title:{ //表格名称在左上角显示
text:"firstK",
},
tooltip:{ //提示框，鼠标悬浮交互时的信息提示。
trigger:"axis",
//触发类型，默认值为item 可选值为 item，axis 为item只会显示改点的数据，为axis时会显示该列下所有坐标轴对应的数据
formatter: function (params) { //内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方
var res = params[0].seriesName + '' + params[0].name;
res += '
开盘:' + params[0].value[0] + "最高:" +params[0].value[3];
res += '
收盘:' + params[0].value[1] + "最低:" +params[0].value[2];
return res;
}
},
legend:{ //图例，表示数据与图表的关联
data:['上证指数'],
},
toolbox:{ //辅助工具箱，辅助功能，如添加标线，框选缩放等 就是右上角的工具箱
show:'true',
feature : {
mark : {show:true}, //辅助线标志
dataZoom :{show : true}, // 框选区域缩放
dataView :{show:true,readOnly:false},// 数据视图，readyOnly默认数据视图为只读，
magicType : {show: true,type: ['line','bar']},//
restor : {show:true},//
saveAsImage : {show:true},//
}
},
dataZoom:{ //图表下面的缩放选择器
show : true,
realTime : true, //缩放变化是否实时显示
start : 0,
end :100,
},
xAxis : [
{
type :'category', //坐标轴类型横轴默认为category，纵轴默认为value 可选值为：category value time log
boundaryGap :true, //类目其实和结束两端的空白策略，为FALSE则顶头
axisTick : {onGap:false}, //坐标轴小标记 ongap：小标记是否显示为间隔，默认等于boundaryGap；
splitLine : {show:false}, //分割线 show为false不显示
data:[
"2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
"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",
"2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12",
"2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19",
]
}
],
yAxis : [
{
type:"value",
scale :true, //脱离0值比例，放大聚焦到最终_min，_max区间
boundaryGap:[0.01,0.01]
}
],
series :[
{
name:"上证指数",
type :'k',
barMaxWidth: 20,
itemStyle: {
normal: {
color: 'red', // 阳线填充颜色
color0: 'lightgreen', // 阴线填充颜色
lineStyle: {
width: 2,
color: 'orange', // 阳线边框颜色
color0: 'green' // 阴线边框颜色
}
},
emphasis: {
color: 'black', // 阳线填充颜色
color0: 'white' // 阴线填充颜色
}
},
data :[// 开盘，收盘，最低，最高
{
value:[2320.26,2302.6,2287.3,2362.94],
itemStyle: {
normal: {
color0: 'blue', // 阴线填充颜色
lineStyle: {
width: 3,
color0: 'blue' // 阴线边框颜色
}
},
emphasis: {
color0: 'blue' // 阴线填充颜色
}
}
},
[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],
]
}
]
}
myChart.setOption(option);
