echasrts定义折线图legend的样式-优化

简介: echasrts定义折线图legend的样式-优化
option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    //定义折线图legend的形状哈
    legend: {
        itemWidth: 10,
        itemHeight: 1,
        itemGap: 10,
        data:[  
            {name:'邮件营销',icon:'rect'},
            {name:'联盟广告',icon:'rect'},
            {name:'视频广告',icon:'rect'},
             {name:'直接访问',icon:'rect'},
            {name:'搜索引擎',icon:'rect'}
        ],
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};


注意


通过 data:[
    {name:'邮件营销',icon:'rect'},
    {name:'联盟广告',icon:'rect'},
    {name:'视频广告',icon:'rect'},
    {name:'直接访问',icon:'rect'},
    {name:'搜索引擎',icon:'rect'}
],//分别修改legend格式 ,缺省则为默认


还可以定义其他的形状


后面有时间可以看看


然后在回头来写


1425695-20210818221844072-1069153925.png

相关文章
|
1月前
|
搜索推荐 数据可视化 Python
Matplotlib图表中的数据标签与图例设置
【4月更文挑战第17天】这篇文章介绍了如何在Python的Matplotlib库中设置数据标签和图例,以增强图表的可读性和解释性。主要内容包括:使用`text`函数添加基本和自定义数据标签,以及自动和手动创建图例。图例的位置和样式可通过`loc`和相关参数调整。文章强调了数据标签和图例结合使用的重要性,提供了一个综合示例来展示实践方法。良好的图表设计旨在清晰有效地传达信息。
|
7月前
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
105 1
|
1月前
|
数据可视化 数据处理
灯芯柱状图代码解读
灯芯柱状图代码解读
45 0
|
7月前
Echarts图表中饼状图的指示线条
Echarts图表中饼状图的指示线条
53 1
|
7月前
|
JSON 数据格式
Echarts折线图分段用不同颜色显示
Echarts折线图分段用不同颜色显示
64 0
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
479 0
|
9月前
|
Python
mplfinance设置K线图中红涨绿跌的样式
要设置K线图中红涨绿跌的样式,您可以使用mplfinance库中的marketcolors参数来自定义K线图的颜色。默认情况下,mplfinance会使用红色表示上涨和绿色表示下跌,但您可以根据自己的需求进行修改。
|
11月前
|
前端开发
echart折线图堆叠 y轴和实际数据不对应
echart折线图堆叠 y轴和实际数据不对应
111 0
|
11月前
|
前端开发
Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案
Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案
117 0
|
11月前
echarts的legend——图例样式的配置
echarts的legend——图例样式的配置
1152 0