初窺ECharts-有解無憂

近來趁著空閑時間了解了一下 ECharts，也順帶記錄一番，

首先要從下載ECharts庫，這個從官網可以直接下載，

引入ECharts.JS

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="https://www.cnblogs.com/HappyBear/p/~/lib/jquery/dist/jquery.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://www.cnblogs.com/HappyBear/p/~/dist/echarts.min.js"></script>
</head>

準備容器

 <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>

繪制圖表之前需要了解的一些概念(出自api)

1，系列(series)：在 echarts 里，系列（series）是指：一組數值以及他們映射成的圖，“系列”這個詞原本可能來源于“一系列的資料”，而在 echarts 中取其擴展的概念，不僅表示資料，也表示資料映射成為的圖，所以，一個系列包含的要素至少有：一組數值、圖表型別（series.type）、以及其他的關于這些資料如何映射成圖的引數，

2，組件(component)：在系列之上，echarts 中各種內容，被抽象為“組件”，例如：xAxis（直角坐標系 X 軸）、yAxis（直角坐標系 Y 軸）、grid（直角坐標系底板）、angleAxis（極坐標系角度軸）、radiuAxis（極坐標系半徑軸）、polar（極坐標系底板）、geo（地理坐標系）、dataZoom（資料區縮放組件）、visualMap（視覺映射組件）、tooltip（提示框組件）、toolbox（工具列組件）、series（系列）、...

使用option 描述圖表和ajax載入資料

option的話可以根據自己的需求進行設計(需要什么型別的圖表，要什么資料)，

資料的話可以再series里直接填入，也可以用異步加載方式，下面就是通過ajax載入的，

最后只需要通過 setOption 填入就行，

 <script type="text/javascript">
          // 基于準備好的dom，初始化echarts實體
        var myChart = echarts.init(document.getElementById('main'));
        var seriesData = https://www.cnblogs.com/HappyBear/p/[];
        var legendData = [];
            $.post("/Account/EchartsInfo", function (data) {
                var list = eval("(" + data + ")");
                for (var i = 0; i < list.length; i++) {
                    seriesData.push({
                        name: list[i]['name'],
                        value: list[i]['count']
                    })
                    legendData.push((list[i]['name']))
                }
           // 指定圖表的配置項和資料
          var option = {
            title: {
                text: '博客分布',
                subtext: '本網站作者發布博客統計環形圖',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
              legend: {

                type: 'scroll',
                orient: 'vertical',
                bottom: '20px',
                left: 'right',
                data:legendData
              },

            series: [
                {
                    name: '博客量統計',
                    //hover狀態下的扇區放大影片效果，默認為true
                    hoverAnimation: true,
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '60%'],
                    data: seriesData,
                     emphasis: {
                    itemStyle: {
                    shadowBlur: 100,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                    },
                }
            ]
        };
                  myChart.setOption(option)
            });

    </script>

效果：

一般通過異步載入的時候可能會出現資料加載時間較長的情況，ECharts 提供了一個簡單的加載影片，

顯示影片：

    myChart.showLoading();

隱藏影片:

  myChart.hideLoading();

我們也可以再更改容器的顏色主題：

var chart = echarts.init(main, 'dark');

效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/146957.html

標籤：JavaScript

上一篇：js 預編譯

下一篇：08.JS單詞整理