Echarts折线图样式之 option配置

风哑

已于 2023-08-19 18:50:27 修改

阅读量817

点赞数

CC 4.0 BY-SA版权

分类专栏： eCharts 文章标签： echarts 前端 javascript

于 2022-08-27 21:45:08 首次发布

本文链接：https://blog.youkuaiyun.com/A_Common_Man/article/details/126562864

eCharts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用ECharts绘制平滑曲线图表的方法，并详细展示了如何通过调整各项配置参数实现美观且实用的数据可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果：

再上代码：

 option: {
                // 显示图例
                legend: {
                    show: true,
                    left: 'center', // 水平居中对齐
                    icon: 'rect', //改变图例图形为线性
                    itemWidth: 25,
                    itemHeight: 3,
                    itemGap: 20 //每个图例之间的间隔
                },
                toolbox: {
                    show: false // 不显示工具栏
                },
                color: ['#2ad9ff', '#ffb368'], // 线条颜色
                yAxis: {
                    name: '万条',
                    nameGap: 30, //坐标轴名称与轴线之间的距离
                    axisLine: {
                        show: false //不显示y轴
                    },
                    axisTick: {
                        show: false // 不显示刻度线
                    },
                    splitLine: { //y轴分割线
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#016398'
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: 1, // 平缓曲线 取值0-1
                        areaStyle:{ },//显示线条包裹的区域颜色  
                        showSymbol: true, // 是否显示拐点
                        symbol: 'emptyCircle', // 定义拐点样式为空心圆
                        symbolSize: 6 //拐点大小
                    },
                    {
                        type: 'line',
                        smooth: true
                    }
                ]
            }