echarts使用總結

時間 2019-12-09

標籤 echarts 使用總結简体版

原文原文鏈接

項目中須要實現數據可視化，在前輩的推薦之下，最終選取了echarts來實現，在此關於echarts的使用進行總結，最終代碼分享至個人github。javascript

關於echarts

echarts是百度推出的，使用JavaScript實現的開源可視化庫，能夠提供直觀、可定製化的數據可視化圖表，包括折線圖、柱狀圖、散點圖、地圖和餅圖等，點擊跳轉主頁。css

使用

需求

使用以前先談需求：使用echarts的話，需求基本上都是爲了實現數據可視化，那麼數據可視化牽扯到一個怎麼展現的問題，就echarts功能而言，展現將經過可視化圖表進行，也就是，這裏的需求可歸爲將某數據使用echarts以圖表（假定爲柱狀圖）的形式呈現。html

實現

通常狀況，我會直接打開echart官方實例, 選取相應的實例，咱們以最簡單的折線圖爲例。能夠看到對應的JS代碼爲：java

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

那麼，這裏的各類變量分別表明的是什麼含義呢？固然能夠在此修改部分數據，查看折線圖的變化，echarts圖形化的呈現是經過setOption配置方法來實現的，點擊詳情，這裏對各類配置作出詳盡的介紹。git

簡單實例

那麼在平常開發環境中如何實現呢？
首先，建立first.html文件，並編寫：github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts使用</title>  
    <link rel="stylesheet" href="css/style.css">
    <script src="js/echarts.min.js"></script> 
</head>
<body>
    <div class="content">
        <div class="title">
            echarts使用案例
        </div>
        <div class="chart">
            <div id="firstchart">
            </div>
        </div>
    </div>

 <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('firstchart'));
    var option = {
        title: {
            text: '一週溫度變化',
            left: 'center',
            top: '1%',
            textStyle: {
                color: 'white',
                fontSize:16,
            }
        },
        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine:{
                lineStyle: {
                    color:'white',
                }
            },
        },

        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            axisLine:{
                lineStyle: {
                    color:'white',
                }
            },
        },
        series: [{
            data: [11, 12, 15, 5, 8, 14, 9],
            type: 'line'
        }]
    };

    myChart.setOption(option);
 </script>
</body>
</html>

編寫對應的css樣式文件，打開瀏覽器就可看到對應的折線圖。瀏覽器

定製

在平時的使用中，其它需求勢必存在，而echarts自己也提供了這種定製化配置。下面關於一些常見需求舉例說明：echarts

添加圖注

就上述折線圖而言，氣溫變化通常可分爲最高溫度變化和最低溫度變化，也就意味着會有兩條折線。爲了更直觀表現，這裏可以使用圖注來講明,在配置項中legend屬性：code

legend:{
    right:0,
    top:3,
    textStyle:{
        fontSize:12,
        color:'#FFF',
    },
    data:['最高溫度變化']
},

並設置了圖注屬性。htm

將座標名旋轉

因爲圖標可佔用的空間有限，加之座標名字符較長，就致使座標名顯示不全的狀況，能夠將作代表改成斜體展現（旋轉角度），經過在xAxis中添加axisLabel屬性來實現：

xAxis : [
    {
    axisLabel:{
        interval:0,
        rotate:45,//傾斜度 -90 至 90 默認爲0
        },
    }
]

設置座標網格背景

爲了界面的美觀，能夠在圖表中繪製網格，並設置網格背景。首先，在xAxis下添加：

splitLine:{
    show:true,
    lineStyle:{
        color: 'white',
        width:1,
        type: 'solid'
    }
},

這樣，繪製了網格，而後，在yAxis中添加：

splitArea:{
    show:true,
    areaStyle:{
        color:['#6a6f71', '#5b6062'],
    },
},

便可實現網格背景，以下圖所示：

以上。本文將持續更新。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。