echarts學習：簡單柱狀圖和折線圖

本文轉載自查看原文 2020-04-26 21:59 2214 javascript

一：代碼

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <!-- 1. 引入echart的文件 -->
    <script src="../echarts.min.js"></script>
</head>
<body>

<!-- 2. 准備一個dom容器 -->
<div id="main" style="width:900px;height:600px;"></div>
<script type="text/javascript">
// 3. 初始化echarts實例
    var MyChart = echarts.init(document.getElementById("main"));
    // 4. 指定圖標的配置和數據
    var option = {
        // 標題
        title:{
            text:"學習Echarts"
        },
        // 工具箱
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },
        // 圖例
        legend:{
            type:"plain",
            show:true,
            data:["人口/萬"]
        },
        // x軸
        xAxis:{
            data:["西安","成都","重慶","北京","上海","鄭州","武漢","深圳","廣州","杭州"]
        },
        // y軸不傳數據，就使用series里面的data數據
        yAxis:{},
        series:[{
            name:"人口/萬",
            type:"bar",
            data:[1000,1633,3101,2154,2423,1013,1100,1418,1302,1490,870]
        }]
    };
    // 5. 使用配置和數據顯示圖表
    MyChart.setOption(option);

</script>

</body>
</html>

二：效果

需求：怎么在柱狀圖上顯示具體的人口數是多少？

series:[{
            name:"人口/萬",
            type:"bar",
            data:[1000,1633,3101,2154,2423,1013,1100,1418,1302,1490,870],
            label:{
                show:true,
                position:"top",
                textstyle:{
                    color:"#FFB6C1", # 這里修改顏色和文字大小不管用
                    fontSize:20
                }
            }
        }]
    };

效果

需求：將柱狀圖改為折線圖

series:[{
            name:"人口/萬",
            type:"line",
            data:[1000,1633,3101,2154,2423,1013,1100,1418,1302,1490,870],
            label:{
                show:true,
                position:"top",
                textstyle:{
                    color:"#FFB6C1",
                    fontSize:30
                }
            }
        }]
    };

效果

# TODO

免責聲明！

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

猜您在找 echarts中柱狀圖折線圖的基本配置 echarts繪制折線圖、柱狀圖 echarts多條折線圖和柱狀圖實現 echarts 動態獲取數據（柱狀圖，折線圖） Echarts---折線圖--柱狀圖 Echarts 系列之折線圖、柱狀圖相關配置 iOS 折線圖、柱狀圖的簡單實現 ChartControl 折線圖柱狀圖頁面利用ECharts顯示柱狀圖、餅圖、折線圖、雷達圖Demo echarts雙y軸折線圖柱狀圖混合實時更新圖