echarts折线图默认不显示数据圆点,鼠标划上之后折线图才显示圆点

只需要设置showSymbol为false就可以了,表示只在 tooltip hover 的时候显示。
代码如下:

option = {
  tooltip: {
      trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      showSymbol: false // 在 tooltip hover 的时候显示
    }
  ]
};

在这里插入图片描述

为了实现echarts折线图右击圆点删除数据,你可以按照以下步骤进行操作: 1.在echarts的option中,设置series中的symbol为circle,表示折线图上的节圆点。 2.在series中设置itemStyle,用于设置节的样式,包括颜色、边框等。 3.在series中设置markPoint,用于在节上添加标记,包括标记的样式、标签等。 4.在markPoint中设置data,用于设置标记数据,包括坐标、名称等。 5.在markPoint中设置itemStyle,用于设置标记的样式,包括颜色、边框等。 6.在markPoint中设置label,用于设置标记的标签,包括文本、位置等。 7.在markPoint中设置emphasis,用于设置标记的高亮样式,包括颜色、边框等。 8.在series中设置markLine,用于在节之间添加标记线,包括标记线的样式、标签等。 9.在markLine中设置data,用于设置标记线的数据,包括起、终等。 10.在markLine中设置itemStyle,用于设置标记线的样式,包括颜色、边框等。 11.在markLine中设置label,用于设置标记线的标签,包括文本、位置等。 12.在markLine中设置emphasis,用于设置标记线的高亮样式,包括颜色、边框等。 13.在echarts的option中,设置toolbox,用于添加工具栏,包括保存图片、数据视图、重置等。 14.在toolbox中设置feature,用于设置工具栏的功能,包括保存图片、数据视图、重置等。 15.在feature中设置mark,用于设置标记的删除功能,包括图标、文本等。 以下是一个示例代码,可以实现echarts折线图右击圆点删除数据: ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, toolbox: { feature: { saveAsImage: {}, dataView: {}, restore: {}, mark: { show: true, title: '删除数据', icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zM512 896c-212 0-384-172-384-384s172-384 384-384 384 172 384 384S724 896 512 896z m128-512H384c-17.7 0-32 14.3-32 32s14.3 32 32 32h256c17.7 0 32-14.3 32-32s-14.3-32-32-32z', onclick: function(params) { var dataIndex = params.dataIndex; var seriesIndex = params.seriesIndex; myChart.dispatchAction({ type: 'downplay', seriesIndex: seriesIndex, dataIndex: dataIndex }); myChart.dispatchAction({ type: 'deleteMarkPoint', seriesIndex: seriesIndex, dataIndex: dataIndex }); } } } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, series: [ { name:'邮件营销', type:'line', symbol: 'circle', itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 }, markPoint: { symbol: 'circle', symbolSize: 20, data: [ {name: '周三', value: 120, coord: ['周三', 120]}, {name: '周六', value: 200, coord: ['周六', 200]}, {name: '周日', value: 180, coord: ['周日', 180]} ], itemStyle: { color: '#00FF00', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#0000FF', borderColor: '#000000', borderWidth: 2 } } }, markLine: { symbol: 'none', data: [ {name: '周三到周六', value: 120, coord: [['周三', 120], ['周六', 200]]}, {name: '周六到周日', value: 180, coord: [['周六', 200], ['周日', 180]]} ], itemStyle: { color: '#0000FF', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 } } }, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', symbol: 'circle', itemStyle: { color: '#00FF00', borderColor: '#000000', borderWidth: 2 }, markPoint: { symbol: 'circle', symbolSize: 20, data: [ {name: '周一', value: 220, coord: ['周一', 220]}, {name: '周四', value: 150, coord: ['周四', 150]}, {name: '周五', value: 232, coord: ['周五', 232]} ], itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#0000FF', borderColor: '#000000', borderWidth: 2 } } }, markLine: { symbol: 'none', data: [ {name: '周一到周四', value: 220, coord: [['周一', 220], ['周四', 150]]}, {name: '周四到周五', value: 232, coord: [['周四', 150], ['周五', 232]]} ], itemStyle: { color: '#0000FF', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 } } }, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'line', symbol: 'circle', itemStyle: { color: '#0000FF', borderColor: '#000000', borderWidth: 2 }, markPoint: { symbol: 'circle', symbolSize: 20, data: [ {name: '周二', value: 150, coord: ['周二', 150]}, {name: '周四', value: 120, coord: ['周四', 120]}, {name: '周日', value: 220, coord: ['周日', 220]} ], itemStyle: { color: '#00FF00', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 } } }, markLine: { symbol: 'none', data: [ {name: '周二到周四', value: 150, coord: [['周二', 150], ['周四', 120]]}, {name: '周四到周日', value: 220, coord: [['周四', 120], ['周日', 220]]} ], itemStyle: { color: '#0000FF', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 } } }, data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接访问', type:'line', symbol: 'circle', itemStyle: { color: '#FF00FF', borderColor: '#000000', borderWidth: 2 }, markPoint: { symbol: 'circle', symbolSize: 20, data: [ {name: '周一', value: 320, coord: ['周一', 320]}, {name: '周三', value: 332, coord: ['周三', 332]}, {name: '周五', value: 301, coord: ['周五', 301]} ], itemStyle: { color: '#00FF00', borderColor: '#000000', borderWidth: 2 }, label: { show: true, formatter: '{b}\n{c}', position: 'insideTop' }, emphasis: { itemStyle: { color: '#FF0000', borderColor: '#000000', borderWidth: 2 } } }, markLine: { symbol: 'none', data: [ {name: '周一到周三', value: 320, coord: [['周一', 320], ['周三', 332]]}, {name:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值