禁用echart hover
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<!-- 引入 echarts.js -->
<script src="./echarts.js"></script>
<!-- <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>-->
<style>
* {
padding: 0;
margin: 0;
}
.contain {
display: inline-block;
width: 375px;
height: 500px;
/* background: pink; */
}
/* echart自身 */
.main {
width: 100%;
padding: 15px;
height: 300px;
width: 300px;
background: yellow;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="contain">
<div id="main" class="main"></div>
</div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var xData = ['3-10', '', '', '', '', '', '3-16']
var legendData = ['接待量', '新增客户', '跟进客户', '下订客户', '成交客户', '流失客户']
var yData = [
{
name: '接待量',
type: 'line',
data: [10, 20, 10, 20, 10, 20, 10],
// 平滑曲线显示
smooth: 0.5,
// 拐点标志的样式设置
itemStyle: {
// 拐点大小
size: 6,
// 拐点颜色
color: '#FFFF00',
// 拐点边框色
borderColor: "#fff"
},
// 标记的图形,圆心
symbol: "circle",
lineStyle: {
// 线条颜色
color: '#fff',
// 线宽
width: 1
}
},
{
name: '新增客户',
type: 'line',
data: [20, 30, 20, 30, 20, 30, 20],
// 平滑曲线显示
smooth: 0.5,
// 拐点标志的样式设置
itemStyle: {
// 拐点大小
size: 6,
// 拐点颜色
color: '#4DD4CC',
// 拐点边框色
borderColor: "#fff"
},
// 标记的图形,圆心
symbol: "circle",
lineStyle: {
// 线条颜色
color: '#fff',
// 线宽
width: 1
}
},
{
name: '跟进客户',
type: 'line',
data: [30, 40, 30, 40, 30, 40, 30],
// 平滑曲线显示
smooth: 0.5,
// 拐点标志的样式设置
itemStyle: {
// 拐点大小
size: 6,
// 拐点颜色
color: '#2352FF',
// 拐点边框色
borderColor: "#fff"
},
// 标记的图形,圆心
symbol: "circle",
lineStyle: {
// 线条颜色
color: '#fff',
// 线宽
width: 1
}
},
{
name: '下订客户',
type: 'line',
data: [40, 50, 40, 50, 40, 50, 40],
// 平滑曲线显示
smooth: 0.5,
// 拐点标志的样式设置
itemStyle: {
// 拐点大小
size: 6,
// 拐点颜色
color: '#00CC00',
// 拐点边框色
borderColor: "#fff"
},
// 标记的图形,圆心
symbol: "circle",
lineStyle: {
// 线条颜色
color: '#fff',
// 线宽
width: 1
}
},
{
name: '成交客户',
type: 'line',
data: [50, 60, 50, 60, 50, 60, 50],
// 平滑曲线显示
smooth: 0.5,
// 拐点标志的样式设置
itemStyle: {
// 拐点大小
size: 6,
// 拐点颜色
color: '#D202FF',
// 拐点边框色
borderColor: "#fff"
},
// 标记的图形,圆心
symbol: "circle",
lineStyle: {
// 线条颜色
color: '#fff',
// 线宽
width: 1
}
},
{
name: '流失客户',
type: 'line',
data: [60, 70, 60, 70, 60, 70, 60],
// 平滑曲线显示
smooth: 0.5,
// 拐点标志的样式设置
itemStyle: {
// 拐点大小
size: 6,
// 拐点颜色
color: '#FD5853',
// 拐点边框色
borderColor: "#fff"
},
// 标记的图形,圆心
symbol: "circle",
lineStyle: {
// 线条颜色
color: '#fff',
// 线宽
width: 1
}
}
]
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
itemStyle: {
color: 'green'
},
// silent: true,
emphasis: {
itemStyle: {
color: 'pink'
}
},
backgroundStyle: {
color: 'grey'
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click', function (parmas) {
console.log(parmas)
});
setTimeout(() => {
// myChart.resize({
// width: '500px',
// height: '500px'
// })
myChart.dispatchAction({
type: 'highlight',
// type: 'focusNodeAdjacency',
seriesIndex: 0,
dataIndex: 4
});
console.log('修改')
}, 3000)
</script>
</html>
标签：hover,echart,color,禁用,拐点,width,itemStyle,fff,type 来源： https://blog.csdn.net/u013239476/article/details/112783350