echarts折线图右击圆点删除数据
时间: 2023-11-23 15:57:59 浏览: 155
Echarts:基础折线图(含异步加载数据)
5星 · 资源好评率100%
为了实现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:
阅读全文