一個div多個圖表共用一個圖例

本文轉載自查看原文 2019-09-20 17:38 590 Echarts實戰

想實現一個圖例（公司名），點擊讓div中三個圖表進行顯示相應的數據，並渲染到圖表中（公司數據可能很多，讓其默認顯示三條數據），並且每個圖表都有相應的標題和datazoom區域展示，點擊下拉框會進行相應的數據進行渲染和主題切換

話不多說，放上效果圖和代碼供參考

有些代碼里的方法是直接套用上一個里面的，有興趣的可以去看看圖表實戰的其他內容，

可能注釋有些不完整，參考其他內容里面的js插件

<!-- 產能 產量 開工率 倉儲 -->

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/dark.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/wonderland.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/chalk.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
        <style type="text/css">
            /* #main1{
            /* background: #FF0000; */
            /* display: inline-block; */
            /* margin-left: 12%; */
            /* margin-top: 40px; */
            /* } */
            #main2 {
                /* background: #000000; */
                display: inline-block;
                margin-right: 12%;
                margin-left: 12%;
            }

            #main3 {
                display: inline-block;
                background: #008000;
                margin-left: 12%;
                margin-top: 40px;
            }

            #main4 {
                background: #808080;
                display: inline-block;
                margin-right: 12%;
                margin-left: 12%;
            }
        </style>
    </head>
    <body>
        <div>
            <select id="sel">
                <option value="macarons">macarons</option>
                <option value="dark">dark</option>
                <option value="wonderland">wonderland</option>
                <option value="chalk">chalk</option>
                <option value="purple-passion">purple-passion</option>
            </select>

            <select id="region">
                <option value="all">全部</option>
            </select>
        </div>


        <div id="main" style="width: 100%; height: 600px;"></div>
        <!-- <div id="main2" style="width: 30%; height: 300px;"></div>
    <div id="main3" style="width: 30%; height: 300px;"></div>
    <div id="main4" style="width: 30%; height: 300px;"></div> -->
        <script type="text/javascript">
            function load() {
                var myChart = echarts.init(document.getElementById("main"), 'chalk');
                var option = null;
                //公司名稱數組
                var companyRateOperation = [];
                //產量公司數組,其實這個沒必要,先放着
                var companyYield = [];
                //放入X軸的時間數組
                var date = [];
                //全部的產量數組,二維
                var yield = [];
                //開工率的數組
                var rateOperation = [];
                //產能數組
                var capacity = [];
                //倉儲數組
                var storageWithCompany = [];
                var companysB = [];
                var region = [];
                $.ajax({
                    url: "http://47.93.232.163:8081/shuju/b2/findAnodeStorageRelevant?username=haha2&password=bb3ebf61b8b249584da35f257aa90c3e",
                    dataType: "json",
                    success: function(data) {

                        //取出來所有的地區:華南華北....
                        for (var key in data.regionAndCompany) {
                            region.push(key);
                        }
                        // console.log(region)
                        
                        //渲染下拉框數據
                        for (var i = 0; i < region.length; i++) {
                            $("#region").append("<option value='" + region[i] + "'>" + region[i] + "</option>")
                        }

                        //接口取出來的倉儲的數組
                        for (key in data.storageWithCompany) {
                            storageWithCompany.push(data.storageWithCompany[key])
                        }
                        // console.log(storageWithCompany)

                        // //接口取出來的產能的數組
                        // for(key in data.nameAndCapacity){
                        //     capacity.push(data.nameAndCapacity[key])
                        // }
                        // // console.log(capacity)

                        //接口取出來的開工率的數組
                        for (key in data.nameAndRateOperation) {
                            rateOperation.push(data.nameAndRateOperation[key])
                        }
                        // console.log(rateOperation)

                        //全部的公司名字
                        for (key in data.nameAndRateOperation) {
                            companyRateOperation.push(key);
                        }
                        // console.log(companyRateOperation)
                        
                        companysB = companyRateOperation;
                        
                        //全部的時間數據,二維數組
                        for (var key in data.nameAndDateTime) {
                            date.push(data.nameAndDateTime[key])
                        }
                        // console.log(date)

                        //最終放到lenged里面的公司數組,默認顯示三個
                        var selectCompanyRateOperation = defaultDisplay(companyRateOperation);
                        // console.log(selectCompanyRateOperation)

                        //全部的產量數組,二維,每個公司的產量是一個數組
                        for (var key in data.nameAndYield) {
                            yield.push(data.nameAndYield[key])
                        }
                        // console.log(yield)

                        //新的時間數組
                        var jValue1 = [];
                        for (var i = 0; i < date.length; i++) {
                            for (var j = 0; j < date[i].length; j++) {
                                jValue1.push(date[i][j]);
                            }
                        }
                        //對時間進行去重
                        jValue1 = delDuplicateArrayItem(jValue1);
                        //去掉時分秒並且去重的時間數組(字符串類型)
                        // console.log(jValue1)
                        
                        //每個公司里面的數據在時間軸上出現的位置
                        var index = findIndex(date, jValue1);
                        // console.log(index)
                        
                        
                        //聲明產量數組,需要對之前的數組進行處理(改后的全部的產量數組,逗號已經改成0了)
                        //注意為浮點型
                        var yield1 = ChangeCommas(yield);
                        // console.log(yield1)
                        //聲明一個最終的產量數組(前面為空字符串,后面為empty空)
                        var endyieldCompany = getEndPriceArray(date, jValue1, index, yield1);
                        // console.log(endyieldCompany)
                        
                        
                        //聲明開工率數組,對其字符串轉為float型
                        var rateOperation1=ChangeCommas(rateOperation);
                        // console.log(rateOperation1)
                        //最終的開工率數組
                        var endrateOperationCompany=getEndPriceArray(date, jValue1, index, rateOperation1);
                        // console.log(endrateOperationCompany)
                        

                        //聲明倉儲數組,float
                        var storageWithCompany1=ChangeCommas(storageWithCompany);
                        // console.log(storageWithCompany1)
                        var endstorageWithCompanyCompany=getEndPriceArray(date, jValue1, index, storageWithCompany1);
                        // console.log(endstorageWithCompanyCompany)
                        

                        // 需要在series中進行填充數據的變量
                        var series_content = seriesThree(companyRateOperation, endyieldCompany,endrateOperationCompany,endstorageWithCompanyCompany);
                        // console.log(series_content)

                        

                        //下拉框選擇並顯示相應的公司圖表數據
                                $('#region').change(function() {
                                    //當下拉框值選擇為全部的時候
                                    if ($("#region").val() == "all") {
                                        //重新賦值公司數組
                                        companyRateOperation=companysB;
                                         //重新賦值series接收的內容
                                        series_content = seriesThree(companyRateOperation, endyieldCompany,endrateOperationCompany,endstorageWithCompanyCompany);
                                        //圖表清除
                                        myChart.dispose();
                                        //初始化實例
                                        let Theme = $("#sel").val();
                                        // 基於准備好的dom，初始化echarts實例
                                        myChart = echarts.init(document.getElementById('main'), Theme);
                                        var selectCompanyRateOperation = defaultDisplay(companyRateOperation);
                                        //圖表配置項內容
                                        option=optionT(jValue1, selectCompanyRateOperation, series_content);
                                        myChart.setOption(option);
                                        } else {
                                            myChart.dispose();
                                            //聲明一個變量接收下拉框的值
                                            var regionval = $("#region").val();
                                            // console.log(data.regionAndCompany)
                                            //循環取出來下拉框里面的值所對應的公司名字
                                            for(var key in data.regionAndCompany){
                                                //當循環的值等於下拉框選定的值的時候
                                                //key是漢字,就比如華北
                                                if(key == regionval){
                                                    //賦值公司名字等於其相應地區里面的公司名字
                                                    companyRateOperation = data.regionAndCompany[key];
                                                    // 跳出來循環
                                                    break;
                                                }
                                            }
                                            
                                            //圖表選中前三條數據但是點擊相應的地區會還是默認顯示全部的三條曲線,公司傳過去了但是數據沒有傳過去造成曲線不變的情況
                                            //聲明一個else選擇的數組,用來存放相應的公司里面的數據
                                            var series_content2=[];
                                            // 循環相應地區對應的公司
                                            for(var i=0;i<companyRateOperation.length;i++){
                                                //循環全部要填充到series中數據的長度
                                                for(var j=0;j<series_content.length;j++){
                                                    // 判斷其相應的名字和公司名字相等的時候,把全部數據中該下標的數據存放到新聲明的數組里面,這個數據就是相應地區下的數據
                                                    if(series_content[j].name == companyRateOperation[i]){
                                                        series_content2.push(series_content[j]);
                                                    }
                                                }
                                            }
                                            
                                            
                                            var selectCompanyRateOperation = defaultDisplay(companyRateOperation);
                                            //選中不影響主題切換
                                            let Theme = $("#sel").val();
                                            // 基於准備好的dom，初始化echarts實例
                                            myChart = echarts.init(document.getElementById('main'), Theme);
                                            option=optionT(jValue1, selectCompanyRateOperation, series_content);
                                            myChart.setOption(option);
                                            }
                                });
                                option=optionT(jValue1, selectCompanyRateOperation, series_content);
                                myChart.setOption(option);
                                //響應式
                                // window.onresize = myChart.resize;
                                window.addEventListener("resize", function() {
                                    myChart.resize();
                                });
                        
                    },
                    

                });
                
                $('#sel').change(function() {
                    myChart.dispose();
                    let Theme = $(this).val();
                    // 基於准備好的dom，初始化echarts實例
                    myChart = echarts.init(document.getElementById('main'), Theme);
                    // 使用剛指定的配置項和數據顯示圖表。
                    myChart.setOption(option);
                });
                
            }

            load();
        </script>
    </body>
</html>

html

<!-- 產能 產量 開工率 倉儲 -->

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/dark.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/wonderland.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/chalk.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
        <style type="text/css">
            /* #main1{
            /* background: #FF0000; */
            /* display: inline-block; */
            /* margin-left: 12%; */
            /* margin-top: 40px; */
            /* } */
            #main2 {
                /* background: #000000; */
                display: inline-block;
                margin-right: 12%;
                margin-left: 12%;
            }

            #main3 {
                display: inline-block;
                background: #008000;
                margin-left: 12%;
                margin-top: 40px;
            }

            #main4 {
                background: #808080;
                display: inline-block;
                margin-right: 12%;
                margin-left: 12%;
            }
        </style>
    </head>
    <body>
        <div>
            <select id="sel">
                <option value="macarons">macarons</option>
                <option value="dark">dark</option>
                <option value="wonderland">wonderland</option>
                <option value="chalk">chalk</option>
                <option value="purple-passion">purple-passion</option>
            </select>

            <select id="region">
                <option value="all">全部</option>
            </select>
        </div>


        <div id="main" style="width: 100%; height: 600px;"></div>
        <!-- <div id="main2" style="width: 30%; height: 300px;"></div>
    <div id="main3" style="width: 30%; height: 300px;"></div>
    <div id="main4" style="width: 30%; height: 300px;"></div> -->
        <script type="text/javascript">
            function load() {
                var myChart = echarts.init(document.getElementById("main"), 'chalk');
                var option = null;
                //公司名稱數組
                var companyRateOperation = [];
                //產量公司數組,其實這個沒必要,先放着
                var companyYield = [];
                //放入X軸的時間數組
                var date = [];
                //全部的產量數組,二維
                var yield = [];
                //開工率的數組
                var rateOperation = [];
                //產能數組
                var capacity = [];
                //倉儲數組
                var storageWithCompany = [];
                var companysB = [];
                var region = [];
                $.ajax({
                    url: "",
                    dataType: "json",
                    success: function(data) {

                        //取出來所有的地區:華南華北....
                        for (var key in data.regionAndCompany) {
                            region.push(key);
                        }
                        // console.log(region)
                        
                        //渲染下拉框數據
                        for (var i = 0; i < region.length; i++) {
                            $("#region").append("<option value='" + region[i] + "'>" + region[i] + "</option>")
                        }

                        //接口取出來的倉儲的數組
                        for (key in data.storageWithCompany) {
                            storageWithCompany.push(data.storageWithCompany[key])
                        }
                        // console.log(storageWithCompany)

                        // //接口取出來的產能的數組
                        // for(key in data.nameAndCapacity){
                        //     capacity.push(data.nameAndCapacity[key])
                        // }
                        // // console.log(capacity)

                        //接口取出來的開工率的數組
                        for (key in data.nameAndRateOperation) {
                            rateOperation.push(data.nameAndRateOperation[key])
                        }
                        // console.log(rateOperation)

                        //全部的公司名字
                        for (key in data.nameAndRateOperation) {
                            companyRateOperation.push(key);
                        }
                        // console.log(companyRateOperation)
                        
                        companysB = companyRateOperation;
                        
                        //全部的時間數據,二維數組
                        for (var key in data.nameAndDateTime) {
                            date.push(data.nameAndDateTime[key])
                        }
                        // console.log(date)

                        //最終放到lenged里面的公司數組,默認顯示三個
                        var selectCompanyRateOperation = defaultDisplay(companyRateOperation);
                        // console.log(selectCompanyRateOperation)

                        //全部的產量數組,二維,每個公司的產量是一個數組
                        for (var key in data.nameAndYield) {
                            yield.push(data.nameAndYield[key])
                        }
                        // console.log(yield)

                        //新的時間數組
                        var jValue1 = [];
                        for (var i = 0; i < date.length; i++) {
                            for (var j = 0; j < date[i].length; j++) {
                                jValue1.push(date[i][j]);
                            }
                        }
                        //對時間進行去重
                        jValue1 = delDuplicateArrayItem(jValue1);
                        //去掉時分秒並且去重的時間數組(字符串類型)
                        // console.log(jValue1)
                        
                        //每個公司里面的數據在時間軸上出現的位置
                        var index = findIndex(date, jValue1);
                        // console.log(index)
                        
                        
                        //聲明產量數組,需要對之前的數組進行處理(改后的全部的產量數組,逗號已經改成0了)
                        //注意為浮點型
                        var yield1 = ChangeCommas(yield);
                        // console.log(yield1)
                        //聲明一個最終的產量數組(前面為空字符串,后面為empty空)
                        var endyieldCompany = getEndPriceArray(date, jValue1, index, yield1);
                        // console.log(endyieldCompany)
                        
                        
                        //聲明開工率數組,對其字符串轉為float型
                        var rateOperation1=ChangeCommas(rateOperation);
                        // console.log(rateOperation1)
                        //最終的開工率數組
                        var endrateOperationCompany=getEndPriceArray(date, jValue1, index, rateOperation1);
                        // console.log(endrateOperationCompany)
                        

                        //聲明倉儲數組,float
                        var storageWithCompany1=ChangeCommas(storageWithCompany);
                        // console.log(storageWithCompany1)
                        var endstorageWithCompanyCompany=getEndPriceArray(date, jValue1, index, storageWithCompany1);
                        // console.log(endstorageWithCompanyCompany)
                        

                        // 需要在series中進行填充數據的變量
                        var series_content = seriesThree(companyRateOperation, endyieldCompany,endrateOperationCompany,endstorageWithCompanyCompany);
                        // console.log(series_content)

                        

                        //下拉框選擇並顯示相應的公司圖表數據
                                $('#region').change(function() {
                                    //當下拉框值選擇為全部的時候
                                    if ($("#region").val() == "all") {
                                        //重新賦值公司數組
                                        companyRateOperation=companysB;
                                         //重新賦值series接收的內容
                                        series_content = seriesThree(companyRateOperation, endyieldCompany,endrateOperationCompany,endstorageWithCompanyCompany);
                                        //圖表清除
                                        myChart.dispose();
                                        //初始化實例
                                        let Theme = $("#sel").val();
                                        // 基於准備好的dom，初始化echarts實例
                                        myChart = echarts.init(document.getElementById('main'), Theme);
                                        var selectCompanyRateOperation = defaultDisplay(companyRateOperation);
                                        //圖表配置項內容
                                        option=optionT(jValue1, selectCompanyRateOperation, series_content);
                                        myChart.setOption(option);
                                        } else {
                                            myChart.dispose();
                                            //聲明一個變量接收下拉框的值
                                            var regionval = $("#region").val();
                                            // console.log(data.regionAndCompany)
                                            //循環取出來下拉框里面的值所對應的公司名字
                                            for(var key in data.regionAndCompany){
                                                //當循環的值等於下拉框選定的值的時候
                                                //key是漢字,就比如華北
                                                if(key == regionval){
                                                    //賦值公司名字等於其相應地區里面的公司名字
                                                    companyRateOperation = data.regionAndCompany[key];
                                                    // 跳出來循環
                                                    break;
                                                }
                                            }
                                            
                                            //圖表選中前三條數據但是點擊相應的地區會還是默認顯示全部的三條曲線,公司傳過去了但是數據沒有傳過去造成曲線不變的情況
                                            //聲明一個else選擇的數組,用來存放相應的公司里面的數據
                                            var series_content2=[];
                                            // 循環相應地區對應的公司
                                            for(var i=0;i<companyRateOperation.length;i++){
                                                //循環全部要填充到series中數據的長度
                                                for(var j=0;j<series_content.length;j++){
                                                    // 判斷其相應的名字和公司名字相等的時候,把全部數據中該下標的數據存放到新聲明的數組里面,這個數據就是相應地區下的數據
                                                    if(series_content[j].name == companyRateOperation[i]){
                                                        series_content2.push(series_content[j]);
                                                    }
                                                }
                                            }
                                            
                                            
                                            var selectCompanyRateOperation = defaultDisplay(companyRateOperation);
                                            //選中不影響主題切換
                                            let Theme = $("#sel").val();
                                            // 基於准備好的dom，初始化echarts實例
                                            myChart = echarts.init(document.getElementById('main'), Theme);
                                            option=optionT(jValue1, selectCompanyRateOperation, series_content);
                                            myChart.setOption(option);
                                            }
                                });
                                option=optionT(jValue1, selectCompanyRateOperation, series_content);
                                myChart.setOption(option);
                                //響應式
                                // window.onresize = myChart.resize;
                                window.addEventListener("resize", function() {
                                    myChart.resize();
                                });
                        
                    },
                    

                });
                
                $('#sel').change(function() {
                    myChart.dispose();
                    let Theme = $(this).val();
                    // 基於准備好的dom，初始化echarts實例
                    myChart = echarts.init(document.getElementById('main'), Theme);
                    // 使用剛指定的配置項和數據顯示圖表。
                    myChart.setOption(option);
                });
                
            }

            load();
        </script>
    </body>
</html>

插件js，url自己改

編碼過程中遇到了很多問題，稍微總結一下

1.一個div里面可以實現多個圖表進行排布，相應的可以設置標題和XY軸和series內容

2.想要datazoom與每個圖表進行一一對應，先看自己想滑動的時候需要對應哪個圖表內容，再給他設置標識

里面是一個個的對象，就位置根據需要進行調整，建議用百分比出來就是響應式了（標題也是相同的原理）

這個是用來調整每個圖表在大div中的位置的，根據需要進行排布，建議用百分比

4.關於邏輯問題和缺陷修復就看我代碼注釋啦

5.如果主題渲染不上去就可能是option的位置再重新渲染的時候接受不到這個變量，

所以才會報錯或者出現圖表其他的問題，這個時候可以選擇把option渲染成一個方法

或者聲明一個全局變量 var option=null就好了

我當時在編碼之前不知道這種效果能不能實現，就先在官網上進行相應的操作，我也建議大家像我一樣可以用這種方式確保行為的可行性，

再放上官網上的代碼和效果圖供參考：（數據是模擬的）

option = {
    title: [
        {
        text:"產量",
        left:"23%"
    },
     {
        text:"倉儲",
        left:"23%",
        top:"51%"
    },
    {
        text:"開工率",
        top:"51%",
        right:"23%"
    },
    
    ],
    dataZoom: [
            {
            xAxisIndex: 0,
            type: 'slider',
            show: true,
            height: 20,
            width:"25%",
            left:"13%",
            top:"42%",
            start: 50,
            end: 100,
            textStyle: {
                color: '#FF0000',
                fontSize: 11,
            }
            },
            {
            xAxisIndex: 1,
            type: 'slider',
            show: true,
            height: 20,
            right: '14%',
            width:"25%",
            start: 50,
            end: 100,
            textStyle: {
                color: '#FF0000',
                fontSize: 11,
            }
            },
            {
          xAxisIndex: 2,
            type: 'slider',
            show: true,
            width:"25%",
            left:"13%",
            height: 20,
            start: 50,
            end: 100,
            textStyle: {
                color: '#FF0000',
                fontSize: 11,
            }
            }, ],

    tooltip: {
            trigger: 'axis'
    },
    grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x2: '7%', y: '58%', width: '38%', height: '38%'},
        {x: '7%', y2: '4%', width: '38%', height: '38%'},
    ],
    legend:{
            type: "scroll",
            orient: "vertical",
            right:"20%",
            top: "6%",
    },
    xAxis: [
        {   gridIndex: 0,
            type: 'category',
            data: ["2018年4月","2018年5月"]
        },
        {   gridIndex: 1,
            type: 'category',
            offset:-120,
            data: ["2018年4月","2018年5月"]
        },
        {   gridIndex: 2,
            type: 'category',
            data: ["2018年4月","2018年5月"]
        },
    ],
    yAxis: [
        {   gridIndex: 0, 
            type: 'value',
            name: "萬噸",
           
        },
        {   gridIndex: 1, 
            type: 'value',
             axisLabel: {
            formatter: "{value} %"
          }
        },
        {   gridIndex: 2, 
            type: 'value',
            name: "萬噸"
        },
    ],
   
    series: [
        {
            name:"濟南華陽炭素有限公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data:  [1.2, 1.2],
        },
        {
            name:"濟南萬瑞炭素有限責任公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data:  [4, 4],
        },
        {
            name:"濟南龍山炭素有限公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [2.4, 2.4],
        },
        {
            name:"德州歐萊恩永興碳素有限公司",
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [0.67, 0.5],
        },
        {
            name:"濟南華陽炭素有限公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[47, 91.67]
                
        },
        {
            name:"濟南萬瑞炭素有限責任公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[84, 84]
                
        },
        {
            name:"濟南龍山炭素有限公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[70, 80]
                
        },
        {
            name:"德州歐萊恩永興碳素有限公司",
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[90, 90]
                
        },
        {
            name:"濟南華陽炭素有限公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[0.8, 0.8]
                
        },
        {
            name:"濟南萬瑞炭素有限責任公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[3.2, 3.2]
                
        },
        {
            name:"濟南龍山炭素有限公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[2.2, 2.2]
                
        },
        {
            name:"德州歐萊恩永興碳素有限公司",
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data:[1.2, 1.2]
                
        }
        
    ]
};

只含option

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts 實現多個圖表共用一個 tooltip xAxis 指示線 All in One 多個請求共用一個Servlet（JavaWEB）一個頁面多圖表展示（四個div的方式） highcharts圖表的圖例legend viser圖表之圖例legend Nacos作為配置中心時，多個服務共用一個dataId的配置 Echarts一個頁面加載多個圖表及圖表自適應一個頁面多個echarts圖表自適應一個div有多個class，如何通過xpath獲取？ vue中多個頁面共用一個頭部，但每個頁面標題文字不一樣