现在的大屏要求的折线图是不是越来越花里胡哨了,最近我做大屏项目的时候又遇到了这中图,既然用到这么频繁那就分享给大家。
如下图:
图例和折线图折点要求这样,用到了图例的一些配置属性那他转化成icon,还有symbolSize(图片大小),symbol(图片)这两个配置属性控制折点的样式,相关代码如下
注:需要吧图片转成base64的格式
图例
legend: {
type: "scroll",
right: "2%",
data: Line,
icon: img,
itemWidth: this.fontSize(1),
itemHeight: this.fontSize(1),
textStyle: {
color: "#C8DDF5",
fontSize: this.fontSize(0.6),
},
},
折点
series:{
symbolSize: this.fontSize(1),
symbol: img,
}
最高值最低值
markLine: {
symbol: ["none", "none"],
data: [
{
yAxis: 200, // 自定义值
label: {
// 不显示基准线名称
show: false,
},
lineStyle: {
type: "dashed", // 基准线样式为虚线
color: "rgba(255, 218, 105, 1)",
},
},
{
yAxis: "50",
yAxis: 1800, // 自定义值
label: {
// 不显示基准线名称
show: false,
},
lineStyle: {
type: "dashed", // 基准线样式为虚线
color: "rgba(255, 62, 62, 1)",
},
},
],
},
最后是完整代码
//数据自己设置
let dataName = [];
let datavalue = [];
chartData.forEach((item) => {
dataName.push(item.name);
datavalue.push(item.value);
});
let myChart = echarts.init(this.$refs.TempChart);
myChart.clear();
var Line = ["管道温度"];
var img = [
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABjklEQVRIibWWXVLDMAyEN2kox+mdeIAz8QB36nFIk5oXr1lvZLswg2Y0bhtVX9aSf6bXj4SOTb2HgTWTLZ3EU2NsJU85JgXPKpAnnOW7ukPUAeAegQlSCH0ORo3VxEnGUKUrUsgM4JSd31UVVdyz79lVVYFGNVLAKcfwcwQigM8UdqiRqiBoyf6UncoURCW34CVod+Sp805TJWdxKpslwQ5gC15AmwMAJlWk00YlZwDP2QnThBuAtQFh7ZrNQJiCrujbBfVUas0AHNeKdxunb2Q6tWGXthasTyMA4P2lzv72WT5q/VTJQZHCokU7Mo0NdxEH/Zs5yPeuatF1TGOj9q5qpPuTdtDGAKmJ25ZjFaY5i6LWvsV1MrJVYARWUFfk2woLfEF/wX7l8dZQVkAO8c5h0tYWtAoonMYFP2cGE/qq5guMNlWF7KibIS32J9ouvxM+OiaiGpWu9fNIgcmSPXrwVQBa1N4wGHfgR49yX08VyG8wDv3r5aSMrmgK/vCb65a/ZHjdioL8njayZuw3b1rdUuzfvfMAAAAASUVORK5CYII=",
];
var color = ["#669DFF", "#00f15a", "#0696f9", "#dcf776"];
//数据处理
var datas = [];
Line.map((item, index) => {
datas.push({
symbolSize: this.fontSize(1),
symbol: img[0],
name: item,
type: "line",
yAxisIndex: 1,
data: datavalue,
markLine: {
symbol: ["none", "none"],
data: [
{
yAxis: 200, // 自定义值
label: {
// 不显示基准线名称
show: false,
},
lineStyle: {
type: "dashed", // 基准线样式为虚线
color: "rgba(255, 218, 105, 1)",
},
},
{
yAxis: "50",
yAxis: 1800, // 自定义值
label: {
// 不显示基准线名称
show: false,
},
lineStyle: {
type: "dashed", // 基准线样式为虚线
color: "rgba(255, 62, 62, 1)",
},
},
],
},
itemStyle: {
normal: {
borderWidth: 5,
color: color[index],
},
},
});
});
let option = {
grid: {
left: "15%",
top: "23%",
bottom: "18%",
right: "8%",
},
legend: {
type: "scroll",
right: "2%",
data: Line,
icon: img[0],
itemWidth: this.fontSize(1),
itemHeight: this.fontSize(1),
textStyle: {
color: "#C8DDF5",
fontSize: this.fontSize(0.6),
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
},
backgroundColor: "rgba(8, 16, 43, 0.7)", // 提示框浮层的背景颜色
borderWidth: 0,
textStyle:{
color: "rgba(255, 255, 255, 1)",
fontSize: this.fontSize(0.6),
},
formatter: function (params) {
return (
"<div>管道温度: " +
'<span style="color:rgba(102, 157, 255, 1)"+">' +
params[0].value +'kpa'
+ '</span></div>'
);
},
},
yAxis: [
{
type: "value",
position: "right",
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
{
type: "value",
name: "(℃)",
nameTextStyle: {
color: "rgba(200, 221, 245, 1)",
fontSize: this.fontSize(0.5),
},
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(178, 194, 211, 0.2)",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value}",
color: "rgba(200, 221, 245, 1)",
fontSize: this.fontSize(0.5),
},
},
],
xAxis: [
{
type: "category",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(130, 166, 213, 0.6)",
},
},
axisLabel: {
inside: false,
textStyle: {
color: "rgba(200, 221, 245, 1)", // x轴颜色
fontWeight: "normal",
fontSize: this.fontSize(0.5),
},
},
data: dataName,
},
// {
// type: "category",
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// axisLabel: {
// show: false,
// },
// splitArea: {
// show: false,
// },
// splitLine: {
// show: false,
// },
// //-----
// data: ["1月", "2月", "3月", "4月", "5月", "6月"],
// },
],
series: datas,
};