项目K线图echarts candlestick配置项内容和展示
配置项如下
var k = [["LG",5499.0,6499.0,5499.0,6499.0,5999.0,2,72.0],["TCL",769.0,2499.0,769.0,2499.0,1694.71,7,8461.0],["七星",638.0,638.0,638.0,638.0,638.0,1,55.0],["万宝",558.0,1049.0,558.0,1049.0,790.8,5,1447.0],["三星",2399.0,6499.0,2399.0,6499.0,4161.5,8,1291.0],["上菱",759.0,1699.0,759.0,1699.0,1131.5,4,241.0],["先科",399.0,549.0,399.0,549.0,482.0,3,532.0],["创维",849.0,2299.0,849.0,2299.0,1540.0,9,3887.0],["华日电器",769.0,999.0,769.0,999.0,884.0,2,120.0],["博世",2490.0,12830.0,2490.0,12830.0,5995.0,6,388.0],["卡萨帝",6999.0,8999.0,6999.0,8999.0,7999.0,2,126.0],["双鹿",599.0,1029.0,599.0,1029.0,796.5,4,1169.0],["哈士奇",996.0,8799.0,996.0,8799.0,2254.22,9,758.0],["奥克斯",699.0,2599.0,699.0,2599.0,1649.0,2,309.0],["奥马",499.0,2999.0,499.0,2999.0,1913.29,7,2679.0],["容声",958.0,5699.0,958.0,5699.0,2649.9,20,21814.0],["富信",339.0,439.0,339.0,439.0,382.333,3,810.0],["尊贵",2299.0,2988.0,2299.0,2988.0,2695.33,3,323.0],["小天鹅",1099.0,1099.0,1099.0,1099.0,1099.0,1,114.0],["康佳",698.0,2598.0,698.0,2598.0,1486.38,16,13779.0],["德努希",1698.0,3799.0,1698.0,3799.0,2965.33,3,125.0],["志高",438.0,639.0,438.0,639.0,538.5,2,119.0],["扎努西・伊莱克斯",1149.0,1149.0,1149.0,1149.0,1149.0,1,71.0],["扬佳",518.0,638.0,518.0,638.0,558.0,3,467.0],["新飞",799.0,2999.0,799.0,2999.0,1726.18,11,2014.0],["晶弘",749.0,3999.0,749.0,3999.0,2365.67,9,1648.0],["松下",3490.0,7590.0,3490.0,7590.0,4710.0,5,830.0],["樱花",538.0,699.0,538.0,699.0,598.143,7,2595.0],["欧立",419.0,599.0,419.0,599.0,509.0,2,290.0],["海信",559.0,4299.0,559.0,4299.0,2380.18,17,6639.0],["海尔",649.0,7399.0,649.0,7399.0,2816.61,38,41402.0],["海浪",508.0,658.0,508.0,658.0,583.0,2,209.0],["熊猫",538.0,1180.0,538.0,1180.0,766.833,6,6301.0],["索伊",589.0,589.0,589.0,589.0,589.0,1,285.0],["统帅",719.0,3399.0,719.0,3399.0,2001.5,8,4989.0],["美的",699.0,3999.0,699.0,3999.0,1974.44,18,23296.0],["美菱",799.0,4299.0,799.0,4299.0,2227.57,14,8440.0],["荣事达",1299.0,1299.0,1299.0,1299.0,1299.0,1,77.0],["西门子",2398.0,16030.0,2398.0,16030.0,5372.11,28,6388.0],["长虹",749.0,1149.0,749.0,1149.0,949.0,2,443.0],["韩上",488.0,999.0,488.0,999.0,816.8,5,6730.0],["韩电",638.0,1999.0,638.0,1999.0,1094.0,9,918.0]]
function splitData(rawData) {
var categoryData = [];
var values = [];
var avgvalues = [];
var counts = [];
var solds = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
avgvalues.push(rawData[i].splice(4, 1)[0]);
counts.push(rawData[i].splice(4, 1)[0]);
solds.push(rawData[i].splice(4, 1)[0]);
values.push(rawData[i])
}
return {
categoryData: categoryData,
values: values,
avgvalues: avgvalues,
counts: counts,
solds: solds
};
}
var data0 = splitData(k);
console.log(data0)
var option = {
title: {
text: 'attrResult',
left: 16,
textStyle: {
fontSize: 16
}
},
tooltip: {
trigger: 'axis',
// axisPointer: {type: 'cross'}
},
legend: {
data: ['价格区间', '平均价格', '商品数', '30天总销量']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 50
},
{
show: true,
type: 'slider',
y: '90%',
start: 0,
end: 50
}
],
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
scale: true,
boundaryGap: false,
axisLine: {
onZero: false
},
splitLine: {
show: false
},
splitNumber: 20,
data:["LG","TCL","七星","万宝","三星","上菱","先科","创维","华日电器","博世","卡萨帝","双鹿","哈士奇","奥克斯","奥马","容声","富信","尊贵","小天鹅","康佳","德努希","志高","扎努西・伊莱克斯","扬佳","新飞","晶弘","松下","樱花","欧立","海信","海尔","海浪","熊猫","索伊","统帅","美的","美菱","荣事达","西门子","长虹","韩上","韩电"],
},
yAxis: [{
type: 'value',
name: '价格',
position: 'left',
axisLabel: {
formatter: '{value}'
},
},
{
type: 'value',
name: '商品数',
position: 'right',
axisLabel: {
formatter: '{value}'
},
},
{
type: 'value',
name: '30天总销量',
position: 'right',
offset: 50,
axisLabel: {
formatter: '{value} '
},
}
],
series: [{
name: '价格区间',
type: 'candlestick',
data:data0.values,
barWidth: 10,
markPoint: {
data: [
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'open'
}
]
}
},
{
name: '平均价格',
type: 'line',
smooth: true,
data: data0.avgvalues,
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: '商品数',
type: 'line',
data: data0.counts,
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
yAxisIndex: 1,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: '30天总销量',
type: 'line',
data:data0.solds,
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
yAxisIndex: 2,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
}
]
};
截图如下
