ECharts如何在一张图表中为不同的标记线设置不同的符号 [英] ECharts how to set different symbol for different marklines in one chart

查看:1026
本文介绍了ECharts如何在一张图表中为不同的标记线设置不同的符号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在echarts中,我有一个条形图,我想为其添加两个markLine,但是对于平均"线,我需要箭头样式,对于测试"线,我不希望任何符号开头,并且行的结尾.

In echarts, I have a bar chart, I want to add two markLine for it, but for the 'average' line I need the arrow style, for the 'test' line I do not want any symbol at the start and end of the line.

当我使用以下设置时,它将设置所有不带箭头的markLines,而我想分别控制每个markLine的样式.

When I use below setting,it will set all markLines without arrow while I want to control each markLine's style separately.

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>

推荐答案

我向您展示了几乎所有可能的调整,而没有涉及任何来源,如果您需要更多的调整,请尝试一下:

I showed to you almost all of possible tweaks without hacking sources, if you need more — try to read by yourself:

  • Base Concepts
  • MarkerModel.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>

这篇关于ECharts如何在一张图表中为不同的标记线设置不同的符号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆