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月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
58 2
|
2月前
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
62 2
|
5月前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
6月前
|
搜索推荐 数据可视化 Python
Matplotlib图表中的数据标签与图例设置
【4月更文挑战第17天】这篇文章介绍了如何在Python的Matplotlib库中设置数据标签和图例,以增强图表的可读性和解释性。主要内容包括:使用`text`函数添加基本和自定义数据标签,以及自动和手动创建图例。图例的位置和样式可通过`loc`和相关参数调整。文章强调了数据标签和图例结合使用的重要性,提供了一个综合示例来展示实践方法。良好的图表设计旨在清晰有效地传达信息。
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
650 0
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
206 1
Echarts图表中饼状图的指示线条
Echarts图表中饼状图的指示线条
79 1
|
6月前
|
数据可视化 数据处理
灯芯柱状图代码解读
灯芯柱状图代码解读
64 0
|
Python
mplfinance设置K线图中红涨绿跌的样式
要设置K线图中红涨绿跌的样式,您可以使用mplfinance库中的marketcolors参数来自定义K线图的颜色。默认情况下,mplfinance会使用红色表示上涨和绿色表示下跌,但您可以根据自己的需求进行修改。
864 1