vue使⽤echarts系列之K线图Candlestick 使⽤的是echarts官⽅例⼦
主要是对配置的⼀些说明，项⽬源码githup地址
看⼀下option的配置，除去series⾥⾯的配置，其他属性都是常见的配置，不多展开
option: {
title: {
text: '上证指数',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['⽇K', 'MA5', 'MA10', 'MA20', 'MA30']
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: [],
scale: true,
boundaryGap: false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
show: true
}
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
top: '90%',
start: 50,
end: 100
}
],
}
主要看⼀下series配置⾥⾯的K线图，其他4组数据就是普通的折线图，先看⼀个注释掉K线图的效果，就是简单的多条折线图
OK，现在把其他4组数据注释，只留下K线图，就是现在这样
然后详细说明⼀下这⾥⾯的配置
data: k线图数据，格式[open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最⾼值]）⽰例: data: [[11, 22, 33, 44], [12, 23, 34, 45]....]
itemStyle: 单个 K 线图数据的图形样式，默认阳线红⾊，阴线绿⾊
itemStyle: {
color: '#ec0000', // 阳线颜⾊
color0: '#00da3c', // 阴线颜⾊
borderColor: '#8A0000', // 阳线边框颜⾊
borderColor0: '#008F28' // 阴线边框颜⾊
},
markPoint: 图表标注，就是图上4个圈圈标注
markPoint: {data: []}
data: [ // 有⼏组数据就有⼏个标注
{
name: 'XX标点', // 标注名称，可不填，不会展⽰出来
coord: ['2013/5/31', 2300], // 标注的坐标X轴, Y轴
value: 2300, // 标注的数字
color: 'rgb(41,60,85)' // 标注的颜⾊
}
},
{
name: 'highest value',
// 特殊的标注类型，⽤于标注最⼤值最⼩值等
// 'min' 最⼩值。
// 'max' 最⼤值。
/
/ 'average' 平均值
type: 'max',
valueDim: 'highest' // K线图的取值维度open, close, lowest, highest        },
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'close'
}
],
markLine: 图表标线，就是图上三条虚线
markLine: {
symbol: ['none', 'none'], // 线段两端的图表，默认开始是圆圈，结束是箭头
data: [
[ // 数组格式可以有两个值，表⽰线段的起点和终点
{
name: 'from lowest to highest',
type: 'min',
valueDim: 'lowest', // K线图的取值维度open, close, lowest, highest                symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
},
{
type: 'max',
valueDim: 'highest',
symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
}
]
,
{ // 对象形式为直线
name: 'min line on close',
valueDim: 'close'
},
{
name: 'max line on close',
type: 'max',
valueDim: 'close'
}
]
}
完整代码,vue
<template>
<div class="container">
<div class="chart-container">
<div id="lineChart" ></div>    </div>
</div>
</template>
<script>
import data from './chartdata/candlestickdata' // 图表数据export default {
name: 'candlestickChart',
data() {
return {
option: {
title: {
text: '上证指数',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['⽇K', 'MA5', 'MA10', 'MA20', 'MA30']
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: [],
scale: true,
boundaryGap: false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
}
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
top: '90%',
start: 50,
end: 100
}
],
series: [
{
name: '⽇K',
type: 'candlestick',
data: [],
itemStyle: {
color: '#ec0000',
color0: '#00da3c',
borderColor: '#8A0000',setoption
borderColor0: '#008F28'
},
markPoint: {
label: {
formatter: function (param) {
return param != null ? und(param.value) : '';                    }
},
data: [
{
name: 'XX标点',
coord: ['2013/5/31', 2300],
value: 2300,
itemStyle: {
color: 'rgb(41,60,85)'
}
},
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'close'
}
],
tooltip: {
formatter: function (param) {
return param.name + '<br>' + (d || '');                    }
}
},
markLine: {
symbol: ['none', 'none'],
data: [
[
{
name: 'from lowest to highest',
type: 'min',
valueDim: 'lowest',
symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
},
{
type: 'max',
valueDim: 'highest',
symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
}
],
{
name: 'min line on close',
type: 'min',
valueDim: 'close'
},
{
name: 'max line on close',
type: 'max',
valueDim: 'close'
}
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。