需求:使用echarts插件制作类似股票价值的图表。
先获取官网实例制作k线图,自己再自定义配置tooltip。
- 标记:
需要在图表上自定义标点,可使用 markPoint ;自定义标记对应数据, coord: [x轴值,对应数据value]。 - 自定义tooltip内容:
可使用 formatter ,可接收String or Function(params, ticket, callback)。
函数返回值,可返回html结构值。
先上代码:
// 将获取到的json格式转换成所需要的格式
function splitData(rawData) {
var categoryData = [];
var values = [];
var max = [];
var min = [];
var options = [];
var volumes = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i][0]);
values.push(rawData[i][1]);
min.push(rawData[i][2]);
max.push(rawData[i][3]);
options.push([i, Math.abs(rawData[i][4]), rawData[i][4] > 0 ? 1 : -1]);
volumes.push(rawData[i][5]);
}
return {
categoryData: categoryData,
values: values,
min: min,
max: max,
options: options,
volumes: volumes
};
}
// 过滤是否有 买卖 操作
function fliterData(data) {
var len = data.options.length
var point = []
for (var i = 0; i < len; i ++) {
if (data.options[i][1]) {
point.push({
name: data.options[i][2] > 0 ? '买入' : '卖出',
coord: [data.categoryData[i], data.values[i]],
itemStyle: {
color: 'red'
}
})
}
}
return point
}
// ajax xxxxxxxxxxxxxxxxxxxxxx
// ajax获取到的json格式数组 [["05-03\n2020", 1.331, 1.21, 1.51, 0, 333]]
rawData = []
var data = splitData(rawData);
var point = fliterData(data)
option = {
backgroundColor: '#fff',
animation: true,
legend: {
bottom: 0,
left: 'center',
data: ['单位净值', '最高', '最低']
},
tooltip: {
trigger: 'axis',
triggerOn: 'click',
show: true,
axisPointer: {
animation: true,
type: 'cross',
label: {
},
},
formatter: function (params, ticket, callback) {
var index = params[0].dataIndex
var str = ''
var color = '#00da3c'
if (data.options[index][1]) {
var _o = data.options[index][2] > 0 ? '买入' : '卖出'
color = data.options[index][2] > 0 ? '#00da3c' : 'red'
str = '操作: ' + _o + data.options[index][1] + '份'
}
return `
<div style="min-width: 200px">
${params[0].axisValue} <br>
${params[0].seriesName}: ${params[0].value} <br>
${params[1].seriesName}: ${params[0].value} <br>
${params[2].seriesName}: ${params[0].value} <br>
${params[3].seriesName}: ${params[0].value} <br>
<b style="color: ${color}">${str}</b>
</div>
`
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
},
axisPointer: {
link: {
xAxisIndex: 'all'
},
},
grid: [
{
left: '10%',
right: '8%',
height: '50%'
},
{
left: '10%',
right: '8%',
top: '63%',
height: '16%'
}
],
xAxis: [
{
type: 'category',
data: data.categoryData,
scale: true,
boundaryGap: true,
axisLine: {onZero: false},
splitLine: {show: false},
axisPointer: {
z: 100
}
},
{
type: 'category',
gridIndex: 1,
data: data.categoryData,
scale: true,
boundaryGap: true,
axisLine: {onZero: false},
axisTick: {show: false},
splitLine: {show: false},
axisLabel: {show: false},
}
],
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1,
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false},
splitLine: {show: false}
}
],
dataZoom: [
{
show: true,
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: 0,
end: 100
}
],
series: [
{
name: '单位净值',
type: 'line',
data: data.values,
smooth: true,
itemStyle: {
color: upColor
},
symbolSize: 1,
hoverAnimation: false,
markPoint: {
symbol: 'circle',
symbolSize: 10,
label: {
show: true
},
data: point
},
},
{
name: '最高',
type: 'line',
data: data.max,
smooth: true,
symbolSize: 0,
hoverAnimation: false,
},
{
name: '最低',
type: 'line',
data: data.min,
smooth: true,
symbolSize: 0,
hoverAnimation: false,
},
{
name: '持仓份额',
type: 'bar',
itemStyle: {
color: upColor
},
smooth: true,
data: data.volumes,
xAxisIndex: 1,
yAxisIndex: 1
}
]
}
效果如下: