ECharts从零开始（四）—— title & legend

在对Line和Bar有了些许了解后，发现其实之前提到的title和legend下也有很多可以调整美化的。

首先对title和legend下的参数进行详细的介绍。

title

每个图表最多仅有一个标题控件，但每个标题控件是可以设置主副标题的。

title还支持九宫格自由布局的。那么先补充下什么是九宫格布局：

left,top	center,top	right,top
left,center	center,center	right,center
left,bottom	center,bottom	right,bottom

默认情况下是x:'left';y:'top'
若改为center,top:

若改为right,bottom：

同时，若标题很长，可以用\n来主动换行：

• subtext
subtext是副标题。主副标题都可以在textStyle和subTextStyle中具体调整字体大小、粗细、颜色等。

如果想让text或者subtext是一个超链接，可以添加textlink或subtextlink。

除了上述这些，还可以通过backgroundColor、borderColor和borderWidth分别修改标题背景色、标题边框色和标题边框宽度。

• padding
padding是标题内边距，默认各方向内边距为5px。接受数组分别设定上右下左边距。
  即在title内添加一个padding，并设定为padding:[10,10,10,10]是没有问题的。

---

legend

之前提过，legend是图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

• type
  textStyle、height、width和提到过的基本都是类似的。在此具体来介绍可能会碰到的一种情况。

当图例数量过多时我们应该怎么办？

在图标数量过多时，我们可以在type中设置为scroll（默认为plain）。
且可以在orient中根据情况设置为是纵向（vertical）或者横向（horizontal）。
其中，若设置为horizontal，个人建议加一个bottom使其在最下方显示。

• selected
  selected是配置默认选中状态。当selected中有设置data:false时，可以在打开时默认不显示某个曲线。
  
• selectedMode
  selectedMode是图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。

除此之外也可以设成single或者multiple使用单选或者多选模式。

上述都可以根据个人需求进行调整和修改。

最后给出博主修改后的效果图和代码：

option = {
    title: {
        text: '折线图',
        link:'https://www.echartsjs.com/zh/index.html',
        x:'center',
        y:'top',
        padding: [5, 400],
        backgroundColor:'#00FFFF'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告'],
        x: 'center',
        y: 25,
        itemWidth: 25,
        itemHeight: 20,
        itemGap: 30,
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {show:false},
            dataView:{show:true}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        position:'right',
        axisLine:{show:false},
        splitLine:{
            lineStyle:{
                type:'dashed',
                color:'#DDA0DD'
            }
        }
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210,],
            itemStyle:{
                color:'pink'
            }
            
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310],
            itemStyle:{
                color:'Lightgreen'
            }
        }
    ]
};