echarts多表联动，及更正

来源：互联网发布：csgo笔记本 a卡优化编辑：程序博客网时间：2024/06/05 03:09
关键代码：// 为echarts对象加载数据
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
myChart4.setOption(option4);
//联动配置

            
正确：echarts.connect([myChart1,myChart2,myChart3,myChart4]);


//以下为示例

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="height:200px"></div>
    <div id="main2" style="height:200px"></div>
    <div id="main3" style="height:200px"></div>
    <div id="main4" style="height:200px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
         
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart1 = ec.init(document.getElementById('main1'));
                var myChart2 = ec.init(document.getElementById('main2'));
                var myChart3 = ec.init(document.getElementById('main3'));
                var myChart4 = ec.init(document.getElementById('main4'));
 
                myChart1.setTheme("macarons");
                myChart2.setTheme("macarons");
                myChart3.setTheme("macarons");
                myChart4.setTheme("macarons");
var option1 = {
title: {
text: '温度状况',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['设定温度', '进水温度', '出水温度', '环境温度']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: 'category', //x轴为类目类型
axisLabel: {
show: true,
interval: 0,
rotate: 45
},
data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00', '00:40:00', '00:45:00']


}],
yAxis: [{
type: 'value' //y轴为值类型
}],
series: [{
name: '设定温度',
type: 'line',
smooth: true,
data: [55, 55, 55, 55, 55, 55, 55, 55, 55, 55]
}]
}


var option2 = {
tooltip: {
trigger: 'axis'
},
legend: {
y: -30,
data: ['设定温度', '进水温度', '出水温度', '环境温度']
},
toolbox: {
y: -30,
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: 'category', //x轴为类目类型
axisLabel: {
show: true,
interval: 0,
rotate: 45
},
data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00', '00:40:00', '00:45:00']


}],
yAxis: [{
type: 'value' //y轴为值类型
}],
series: [{
name: '进水温度',
type: 'line',
smooth: true,
data: [15, 15, 16, 18, 18, 19, 19, 19, 19, 19]
}]
}


var option3 = {
tooltip: {
trigger: 'axis'
},
legend: {
y: -30,
data: ['设定温度', '进水温度', '出水温度', '环境温度']
},
toolbox: {
y: -30,
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: 'category', //x轴为类目类型
axisLabel: {
show: true,
interval: 0,
rotate: 45
},
data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00', '00:40:00', '00:45:00']


}],
yAxis: [{
type: 'value' //y轴为值类型
}],
series: [{
name: '出水温度',
type: 'line',
smooth: true,
data: [20, 25, 30, 35, 38, 44, 46, 48, 53, 56]
}]
}


var option4 = {
tooltip: {
trigger: 'axis'
},
legend: {
y: -30,
data: ['设定温度', '进水温度', '出水温度', '环境温度']
},
toolbox: {
y: -30,
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
f
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: 'category', //x轴为类目类型
axisLabel: {
show: true,
interval: 0,
rotate: 45
},
data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00', '00:40:00', '00:45:00']


}],
yAxis: [{
type: 'value' //y轴为值类型
}],
series: [{
name: '环境温度',
type: 'line',
smooth: true,
data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15]
}]
}



                 
               
 
            // 为echarts对象加载数据
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
            myChart4.setOption(option4);
            //联动配置

            
           正确：echarts.connect([myChart1,myChart2,myChart3,myChart4]);





            错误：//myChart1.connect([myChart2, myChart3,myChart4]);
           // myChart2.connect([myChart1, myChart3,myChart4]);
           //myChart3.connect([myChart2, myChart1,myChart4]);
           // myChart4.connect([myChart2, myChart3,myChart1]);
            }
        );
    </script>
</body>
阅读全文
1 0