ECharts如何在一张图表中为不同的markline设置不同的symbol

Question

在echarts中，我有一个条形图，我想为它添加两个markLine，但是对于'average'线我需要箭头样式，对于'test'线我不希望在开始和结束时有任何符号线。

当我使用下面的设置时，它会设置所有没有箭头的标记线，而我想分别控制每个标记线的样式。

markLine: {
    symbol:"none",
    data:[]
}

 function format(data) { data = parseFloat(data); return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); } var columns_basic_element = document.getElementById("columns_basic"); // Basic columns chart if (columns_basic_element) { // Initialize chart var columns_basic = echarts.init(columns_basic_element); var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53]; var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22]; // // Chart config // // Options columns_basic.setOption({ // Define colors color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'], // Global text styles textStyle: { fontFamily: 'Roboto, Arial, Verdana, sans-serif', fontSize: 13 }, // Chart animation duration animationDuration: 750, // Setup grid grid: { left: 0, right: 90, top: 35, bottom: 0, containLabel: true }, // Add legend legend: { data: ['Parts', 'Labor'], itemHeight: 8, itemGap: 20, textStyle: { padding: [0, 5] } }, // Add tooltip tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.75)', padding: [10, 15], textStyle: { fontSize: 13, fontFamily: 'Roboto, sans-serif' } }, // Horizontal axis xAxis: [{ type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { show: true, lineStyle: { color: '#eee', type: 'dashed' } } }], // Vertical axis yAxis: [{ type: 'value', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { lineStyle: { color: ['#eee'] } }, ticks: { beginAtZero: true, callback: function(value, index, values) { return '$' + Intl.NumberFormat().format((value/1000)); } }, splitArea: { show: true, areaStyle: { color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)'] } } }], // Add series series: [ { name: 'Labor', type: 'bar', data: data_labor, label: { normal: { formatter: function (params) { var val = format(params.value); return val; }, show: true, //position: 'inside' }, }, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { fontWeight: 500 } } } }, markLine: { symbol:"none", data: [ { // I want to set symbol:none for this line only name: 'test', yAxis:120000, label: { position: 'insideEndTop', normal: { formatter: '{b}:{c}', show: true }, } }, { //keep its original style type: 'average', name: 'Average', label: { position: 'insideEndTop', normal: { formatter: '{b}:{c}', show: true }, } }] } } ] }); }

 .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>

Answer 1

我向您展示了几乎所有可能的调整而无需黑客源，如果您需要更多 - 尝试自己阅读：

• 基本概念
• 标记模型.js
• MarkLineView.js

 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);

 <div id="main" style="width: 600px;height:600px;"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

Answer 2

你有错误的符号声明错误，这样做：

markLine: {
  symbol: 'icon' // <---- it's wrong
  data: [{
    symbol: 'diamond',   // <---- it's right
    symbolSize: 30,
    name: 'average line',
    type: 'average'
  },{
    symbol: 'circle',
    symbolSize: 30,
    name: 'max line',
    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: [{ name: 'Series1', stack: '1', type: 'bar', data: [5, 20, 36, 10, 10, 20], markLine: { data: [{ symbol: 'diamond', symbolSize: 30, name: 'average line', type: 'average' },{ symbol: 'circle', symbolSize: 30, name: 'max line', type: 'max' }] } }] } myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script> <div id="main" style="width: 600px;height:400px;"></div>