echarts图表之去掉折线图的折点圆圈,实测有效

关键属性:symbol: 'none',

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',

        symbol: 'none',  //取消折点圆圈

        smooth: true
    }]
};

效果对比:

去掉前:

去掉后:

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
ECharts是一个基于JavaScript的开源可视化库,用于构建交互式的数据可视化图表折线图ECharts中的一种常见图表类型,用于展示数据随时间或其他连续变量的变化趋势。 要去掉折线图上的小点,可以通过设置折线图系列(series)的symbol属性为none来实现。具体步骤如下: 1. 引入ECharts库和相关依赖文件。 2. 创建一个包含折线图的容器元素。 3. 初始化ECharts实例,并将容器元素传入。 4. 定义折线图的配置项(option),包括x轴、y轴、系列等设置。 5. 在系列(series)中设置symbol属性为none,表示不显示小点。 6. 调用setOption方法将配置项应用到ECharts实例中。 以下是一个示例代码,展示如何创建一个折线图去掉小点: ```javascript // 引入ECharts库和相关依赖文件 import echarts from 'echarts'; // 创建一个包含折线图的容器元素 const container = document.getElementById('chart-container'); // 初始化ECharts实例,并将容器元素传入 const chart = echarts.init(container); // 定义折线图的配置项 const option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: { type: 'value', }, series: [ { type: 'line', data: [10, 20, 30, 40, 50], symbol: 'none', // 设置symbol属性为none,去掉小点 }, ], }; // 将配置项应用到ECharts实例中 chart.setOption(option); ``` 通过以上代码,你可以创建一个折线图,并且折线上的小点将被去掉

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值