需求
需要实现DL/T722-2014中的立体图示法，标准详见:www.jianbiaoku.com/webarbs/boo…
实现
一开始使用echarts，但是echarts如果想要自定义坐标轴，将坐标type设为category，但是发现如果设为category那么无法识别数值类型，数据点没有办法落在正确的位置。
后来搜索到highcharts可以实现想要的功能，中间不知道搜了多少资料，才实现了数据点自定义间隔。以下贴出主要的几处代码。
坐标轴指定[0,0.1,1,10]并且为数值类型
关键点：yAxis.labels.formatter
标准中需要三个间隔,我这里设置了[0,50,100,150]指定间隔方便之后返回的数据进行计算。
formatter: function () {
var arr = [];
arr[0] = 0;
arr[50] = 0.1;
arr[100] = 1;
arr[150] = 10;
return arr[this.value];
}
y坐标为[10,0.1,1,0]与传统意义的坐标轴的显示方向相反
关键点:chart.inverted
将整个坐标系反转，并控制坐标轴是否需要反转。 参考官方文档:www.highcharts.com.cn/demo/highch…
chart: {
renderTo: 'container',
// margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: {size: 1, color: 'rgba(0,0,0,0.02)'},
back: {size: 1, color: 'rgba(0,0,0,0.04)'},
side: {size: 1, color: 'rgba(0,0,0,0.06)'}
}
},
//需要反转坐标系
inverted: true
},
如果不需要反转的坐标轴配置
xAxis: {
//不需要反转
reversed: false,
gridLineWidth: 1,
title: {text: "C2H2/C2H4"},
min: 0,
max: 150,
tickInterval: 50,
labels: {
formatter: function () {
var arr = [];
arr[0] = 0;
arr[50] = 0.1;
arr[100] = 1;
arr[150] = 10;
return arr[this.value];
}
},
},
需要反转的坐标轴
zAxis: {
//坐标轴需要反转
reversed: true,
min: 0,
max: 150,
tickInterval: 50,
labels: {
formatter: function () {
var arr = [];
arr[0] = 0;
arr[50] = 0.1;
arr[100] = 1;
arr[150] = 10;
return arr[this.value];
}
},
title: {text: "C2H4/C2H6"},
},
去除版权信息
关键点:credits
credits: {
//去掉版权信息
enable: false,
href: '',
position: {},
style: {},
text: ''
},
辅助线
关键点:series
想了很多方法去实现辅助线，最开始想用plotLines，但是没有办法脱离坐标轴，或者我没找到方法？会出现下面的效果
也想过使用3D面积图、柱状图，但好像都无法控制(x,y,z)，或者我没找到方法？
解决思路:通过散点图创建数据集，模拟辅助线。这样会导致加载相对比较慢，但是目前没有想到其他解决思路。
series: [
//真正需要的数据点
{
name:"data",
colorByPoint: true,
data: [[替换C2H2C2H4, 替换C2H4C2H6, 替换CH4H2]
],
dataLabels: {
formatter: function () {
return 'C2H2/C2H4:' + 替换C2H2C2H4 + '<br/>' +
' C2H4/C2H6:' + 替换C2H4C2H6 + '<br/>' +
' CH4/H2:' + 替换CH4H2;
},
enabled: true
}}, {
name: 'PD',
data: PD_data,
color: PD_color,
fillOpacity: 0.3,
marker: {
radius: 0.5,
symbol: 'square'
},
dataLabels: {
formatter: function () {return "";},
enabled: true
}
},
{
name: 'D1',
data: D1_data,
color: D1_color,
fillOpacity: 0.3,
marker: {
radius: 0.5,
symbol: 'square'
},
dataLabels: {
formatter: function () {return "";},
enabled: true
}
},{
name: 'D2',
data: D2_data,
color: D2_color,
fillOpacity: 0.3,
marker: {
radius: 0.5,
symbol: 'square'
},
dataLabels: {
formatter: function () {return "";},
enabled: true
}
},
{
name: 'T1',
data: T1_data,
color: T1_color,
fillOpacity: 0.3,
marker: {
radius: 0.5,
symbol: 'square'
},
dataLabels: {
formatter: function () {return "";},
enabled: true
}
},
{
name: 'T2',
data: T2_data,
color: T2_color,
fillOpacity: 0.3,
marker: {
radius: 0.5,
symbol: 'square'
},
dataLabels: {
formatter: function () {return "";},
enabled: true
}
},
{
name: 'T3',
data: T3_data,
color: T3_color,
fillOpacity: 0.3,
marker: {
radius: 0.5,
symbol: 'square'
},
dataLabels: {
formatter: function () {return "";},
enabled: true
}
}
],`
以pd故障举例
//顶点
let PD_data = [[0,0,0],[0,50,0],[0,50,60],[0,0,60],
[150,0,0],[150,50,0],[150,0,60],[150,50,60],];
//连线方法
this.drawPlotDot(PD_data,0,150,0,60,0,50)
如果每个像素点都连会太卡，现在只能通过隔一个点的效果，细看会看起来比较怪，但是尽力了，最后实现效果如下：
