提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
在实现Echarts图形表轮播中,发现需要实时更新Echarts图形表,会出现多个点闪烁(会跳来跳去的)
一、使用步骤
1.引入库
echarts-auto-tooltip.js文件
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
2.ajax请求代码
var myChart = echarts.init(document.getElementById(Id));
$.ajax({
url: URL,
type: 'post',
data: '',
dataType: 'json',
async: false,
contentType: 'application/json;charset=UTF-8',
success: function (data) {
console.log(data.Data);
var option = {
grid: {
left: '0',
top: '30',
right: '0',
bottom: '10',
containLabel: true
},
legend: {
top: 0,
textStyle: {
color: "#fff",
},
itemWidth: 12, // 设置宽度
itemHeight: 10, // 设置高度
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis: {
type: 'category',
data: data.Data['entity'],
axisTick: { //---坐标轴 刻度
show: true, //---是否显示
},
axisLine: { //---坐标轴 轴线
show: true, //---是否显示
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 1,
type: 'dotted',
},
},
axisLabel: { //X轴文字
textStyle: {
fontSize: 12,
color: '#fff'
},
},
},
yAxis: {
type: 'value',
splitLine: { //分割线
show: true,
lineStyle: {