首頁猿問 ECharts如何為一張圖表中的不...

ECharts如何為一張圖表中的不同標記線設置不同的符號

JavaScript

侃侃無極 2023-07-29 15:42:43

在echarts中，我有一個條形圖，我想為其添加兩條markLine，但是對于“平均”線我需要箭頭樣式，對于“測試”線我不希望在開始和結束處有任何符號線。當我使用下面的設置時，它將設置所有沒有箭頭的標記線，而我想單獨控制每個標記線的樣式。markLine: { symbol:"none", data:[]}.chart-container { position:relative; width:100%;}.chart { position:relative; display:block; width:100%;}.has-fixed-height { height:400px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script><div class="chart-container"> <div class="chart has-fixed-height" id="columns_basic"></div></div>

查看完整描述

2 回答

精慕HU

TA貢獻1845條經驗獲得超8個贊

var myChart = echarts.init(document.getElementById('main'));

? var option = {

? ? xAxis: [{

? ? ? data: ["1", "2", "3", "4", "5", "6"]

? ? },{

? ? ? data: ["1", "2", "3", "4", "5", "6"],

? ? ? show: false,

? ? }],

? ? yAxis: {},

? ? series: [

? ? {

? ? ? name: 'Series1',

? ? ? type: 'bar',

? ? ? data: [5, 20, 36, 10, 10, 20],

? ? ? markLine: {

? ? ? ? data: [{

? ? ? ? ? symbol: 'none',

? ? ? ? ? name: 'max line',

? ? ? ? ? type: 'max',

? ? ? ? ? lineStyle: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? type:'solid',

? ? ? ? ? ? ? color: 'blue',

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? }],

? ? ? }

? ? },{

? ? ? name: 'Series2',

? ? ? type: 'bar',

? ? ? data: [0,0],

? ? ? xAxisIndex: 1,

? ? ? label: { show: false },

? ? ? markLine: {

? ? ? ? symbol: 'none',

? ? ? ? data: [{

? ? ? ? ? yAxis: 24,

? ? ? ? ? label: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ?show: false,?

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? lineStyle: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? type:'dashed',

? ? ? ? ? ? ? color: 'green',

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? }],

? ? ? }

? ? }]

? }

? myChart.setOption(option);

反對回復 2023-07-29

蝴蝶刀刀

TA貢獻1801條經驗獲得超8個贊

將符號設置為數組，當您在當前圖形上獲取選項時顯示默認值let currentOptions = graph.getoption();，然后currentOptions.markLine是顯示默認值的對象，因此要覆蓋默認值，請在系列上使用此選項。

? ?let setPointSeriesObject = {

? ? ? name: "Setpoints",

? ? ? type: 'line',

? ? ? xAxisIndex: 0,

? ? ? yAxisIndex: 0,

? ? ? markLine: {

? ? ? ? symbol:["none","none"],

? ? ? ? data: setPointLines,

? ? ? ? emphasis:{

? ? ? ? ? label: {

? ? ? ? ? ? show:false

? ? ? ? ? },

? ? ? ? ? lineStyle:{

? ? ? ? ? ? width:1

? ? ? ? ? }

? ? ? ? },

? ? ? ? tooltip:{

? ? ? ? ? trigger:"none"

? ? ? ? }

? ? ? }

? ? };

? ? options.series.push(setPointSeriesObject);

為了完整起見，我的代碼有一組設置點，通常是最小和最大公差。這是創建 setPointLines 的代碼

let graphSetPointLinesFixed = [10,-10] //max and min tolerances line

let setPointLines = [];

for (const setPoint of graphSetPointLinesFixed) {

? setPointLines.push({

? ? name:parseFloat(setPoint),

? ? yAxis:parseFloat(setPoint)

? });

}

總的來說，此代碼創建了可以打開和關閉的設定點，如圖所示。我不知道這是什么時候成為設置 markLines 的方法，但它適用于 5.3 和 5.4。

反對回復 2023-07-29

絕地無雙

TA貢獻1946條經驗獲得超4個贊

您的符號聲明有誤，請執行以下操作：

markLine: {

symbol: 'icon' // <---- it's wrong

data: [{

symbol: 'diamond', // <---- it's right

symbolSize: 30,

type: 'average'

},{

symbol: 'circle',

symbolSize: 30,

type: 'max'

}]

}

var myChart = echarts.init(document.getElementById('main'));

// Unsert your code below

var option = {

xAxis: {

data: ["1", "2", "3", "4", "5", "6"]

yAxis: {},

series: [{

stack: '1',

type: 'bar',

data: [5, 20, 36, 10, 10, 20],

markLine: {

data: [{

symbol: 'diamond',

symbolSize: 30,

type: 'average'

},{

symbol: 'circle',

symbolSize: 30,

type: 'max'

}]

}

}]

}

myChart.setOption(option);

反對回復 2023-07-29

2 回答
0 關注
280 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

ECharts如何為一張圖表中的不同標記線設置不同的符號

ECharts如何為一張圖表中的不同標記線設置不同的符號

2 回答

添加回答