The Legend component presents a different set of tags, colors, and names. You can control which series are not displayed by clicking on the legend

Let’s start with a simple legend component

<template>
    <div ref="chart" id="chart"></div>
</template>

<script>
    import * as echarts from 'echarts'
    
    const legend =  {
        // Icon: 'rect' // Set icon rectangle, or circle
        itemGap: 10.// The interval between each item in the legend
        itemWidth: 30.// The width of the graph
        itemHeight: 20.// Figure height
    },           
    
    const series = [
        {
            type: 'pie'.radius: '55%'.center: ['50%'.'60%'].data: [{value: 335.name: 'Yan Xiao Liu'},
                {value: 310.name: 'Li Big mouth'},
                {value: 234.name: 'Tong Xiangyu'},
                {value: 135.name: 'White Exhibition Hall'},
                {value: 1548.name: 'lots of'}}]]const options = {
        backgroundColor: '#fff'.// The background color
        legend,
        series
    };
    
    ~function init() {
        const dom = document.getElementById('chart')
        let myChart = echarts.init(dom);
        myChart.setOption(options)
    }()
</script>
Copy the code

Reference:

Let’s move on to other properties

legend =  {
        ...   // The ellipsis refers to the above attributes
        
        padding: [10.20]  // Set the left, down, and left distances of the entire legend. The upper itemGap is the inner distance of a single small icon
        orient: 'vertical'.// The layout orientation of the legend list. Horizontal - Horizontal - vertical
    }
Copy the code

Vertical Legend reference:

The text is displayed on the left:

legend = {    
    ...
    align: 'right'   // Align the legend tags with the text. Automatic by default, depending on the location and Orient of the component
}
Copy the code

Change the square color: If you don’t customize the color, echarts will automatically assign it, Cycle in turn from [‘ # 5470 c6 ‘, ‘# 91 cc75’, ‘# fac858’, ‘# ee6666’, ‘# 73 c0de’, ‘# 3 ba272’, ‘# fc8452’, ‘# 9 a60b4’, ‘# ea7ccc]

  1. The uniform style is set in legend. ItemStyle
legend = {
    itemStyle: {
            color: {
                type: 'linear'.x: 0.y: 0.x2: 0.y2: 1.colorStops: [{
                    offset: 0.color: '# 912634' // The color at 0%
                }, {
                    offset: 1.color: 'blue' // The color at 100%}}}}],Copy the code

Reference:

Setting the Image background

<template>
    <img src="@/assets/imgs/xx.png" id="img" />
</template>

legend: {       
    itemStyle: {
        color: {
            image: document.getElementById('img'),
            repeat: 'repeat'}}}Copy the code

  • 3. If you want to set each separately, 1. In the outermost color setting, 2. Set it separately in each data

  • The first method

option = {
    color: ['red'.'yellow'.'blue'.'green'.'pink']}Copy the code
  • The second way
option = {
    series: [{value: 335.name: 'Yan Xiao Liu'.itemStyle: {
                normal: {
                    color: "rgba(red, 1)"}}},... ] }Copy the code

Change the text color

legend: {       
    textStyle: {
        color: 'blue'}}Copy the code

Make the text appear in the small box

legend: {
    itemGap: 30.itemWidth: 0.// Set the width and height of the cube to 0
    itemHeight: 0.textStyle: {
        color: 'blue'.padding: [10.30].// Then set the text block as the background
        backgroundColor: 'rgba(227,161,96,0.8)'}}Copy the code

Reference:

Scrolling is displayed when beyond

 legend: {
    ...
    type: 'scroll'.width: '60%'.data: (function (){
        let list = [];
        for (let i = 1; i <=30; i++) {
            list.push(i + 2000 + ' ');
        }
        returnlist; }}) ()Data.length === series.data.length
Copy the code

Regarding the legend topic, I will write here for the time being, and I will fill in what I think of later

The last whisper

'May one day, all people are born equal, no longer the distinction between high and low, to protect life, the pursuit of light ------ The Song of Syria'
Copy the code