蜜臀人妻久久一区二区三,精品人妻少妇无码视频,无码av不卡免费播放

ECharts，一個(gè)純 Javascript 的圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級(jí)的 Canvas 類庫(kù) ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。這里給大家講解兩個(gè)案例帶大家入門ECharts。

入門 Demo 01

如下面 demo 展示，我們嘗試插入一個(gè)簡(jiǎn)單的柱形圖：

兩個(gè)案例帶你入門ECharts

下載 ECharts ，由于是初學(xué)，隨便下什么版本。然后像普通引入外部 JS 文件一樣引入 Echarts ;

在 body 里面寫一個(gè)具有寬高的容器，準(zhǔn)備往里面塞 ECharts ：

1	<div id="wrap" style="width: 100%;height: 400px;"></div>

基于準(zhǔn)備好的 dom ，用 echarts.init() 初始化一個(gè) ECharts 實(shí)例:

1	var myChart = echarts.init(document.getElementById(’wrap’));

指定圖表配置和數(shù)據(jù),具體見(jiàn) 配置項(xiàng)手冊(cè)：

1
2
3

var option = {
//......
};

通過(guò) setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖，下面是完整代碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<div id="wrap1" style="width: 100%;height: 400px;"></div>

    <script src="echarts.min.js"></script>
    
<script type="text/javascript">
//step3：基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById(’wrap1’));
//step4：指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: ’開(kāi)始學(xué)習(xí)ECharts’
},
tooltip: {},
legend: {
data: [’決定因素’]
},
xAxis: {
data: ["天賦","努力","興趣","交流","心態(tài)","好學(xué)"]
},
yAxis: {
// data: [’點(diǎn)數(shù)’]
},
            backgroundColor: ’#91C7AE’,
series: [{
name: ’決定因素’,
type: ’bar’,
data: [5, 20, 36, 10, 10, 20]
}]
};
//step5: 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>

入門 Demo 02

看看上面的demo，我們嘗試畫(huà)一個(gè)進(jìn)化的餅圖 —— 南丁格爾圖

先畫(huà)一個(gè)餅圖：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var myChart = echarts.init(document.getElementById(’wrap2’));
myChart.setOption({
    series : [
        {
            name: ’訪問(wèn)來(lái)源’,
            type: ’pie’,
            radius: ’55%’,
            data:[
                {value:400, name:’搜索引擎’},
                {value:335, name:’直接訪問(wèn)’},
                {value:310, name:’郵件營(yíng)銷’},
                {value:274, name:’聯(lián)盟廣告’},
                {value:235, name:’視頻廣告’}
            ]
        }
    ]
})

這里 data 屬性值不像入門教程里那樣每一項(xiàng)都是單個(gè)數(shù)值，而是一個(gè)包含 name和 value 屬性的對(duì)象，ECharts 中的數(shù)據(jù)項(xiàng)都是既可以只設(shè)成數(shù)值，也可以設(shè)成一個(gè)包含有名稱、該數(shù)據(jù)圖形的樣式配置、標(biāo)簽配置的對(duì)象，具體見(jiàn) data 文檔。

ECharts 中的餅圖也支持通過(guò)設(shè)置 roseType 顯示成南丁格爾圖。

1	roseType: ’angle’

南丁格爾圖會(huì)通過(guò)半徑表示數(shù)據(jù)的大小。

還不夠漂亮？試試美化一下吧

添加陰影，使用到 itemStyle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

roseType: ’angle’,//餅圖轉(zhuǎn)換成南丁格爾圖
//添加陰影
itemStyle: {
     normal: {
        // 陰影的大小
        shadowBlur: 200,
        // 陰影水平方向上的偏移
        shadowOffsetX: 0,
        // 陰影垂直方向上的偏移
        shadowOffsetY: 0,
        // 陰影顏色
        shadowColor: ’rgba(0, 0, 0, 0.5)’
    }
}

itemStyle 都會(huì)有 normal 和 emphasis 兩個(gè)選項(xiàng)，normal 選項(xiàng)是正常展示下的樣式，emphasis 是鼠標(biāo) hover 時(shí)候的高亮樣式。這個(gè)示例里是正常的樣式下加陰影，但是可能更多的時(shí)候是 hover 的時(shí)候通過(guò)陰影突出。

1
2
3
4
5
6

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: ’rgba(0, 0, 0, 0.5)’
    }
}

設(shè)置深色背景和淺色標(biāo)簽

背景色是全局的，所以直接在 option 下設(shè)置 backgroundColor :

1
2
3

setOption({
backgroundColor: ’#2c343c’
})

文本的樣式可以設(shè)置全局的 textStyle

1
2
3
4
5

setOption({
    textStyle: {
        color: ’rgba(255, 255, 255, 0.3)’
    }
})

也可以每個(gè)系列分別設(shè)置，每個(gè)系列的文本設(shè)置在 label.normal.textStyle

1
2
3
4
5
6
7

label: {
    normal: {
        textStyle: {
            color: ’rgba(255, 255, 255, 0.3)’
        }
    }
}

餅圖的話還要將標(biāo)簽的視覺(jué)引導(dǎo)線的顏色設(shè)為淺色。

1
2
3
4
5
6
7

labelLine: {
    normal: {
        lineStyle: {
            color: ’rgba(255, 255, 255, 0.3)’
        }
    }
}

兩個(gè)案例帶你入門ECharts

設(shè)置扇形的顏色

扇形的顏色也是在 itemStyle 中設(shè)置：

1
2
3
4
5
6
7
8

itemStyle: {
    normal: {
        // 設(shè)置扇形的顏色
        color: ’#c23531’,
        shadowBlur: 200,
        shadowColor: ’rgba(0, 0, 0, 0.5)’
    }
}

ECharts 中每個(gè)扇形顏色的可以通過(guò)分別設(shè)置 data 下的數(shù)據(jù)項(xiàng)實(shí)現(xiàn)。

1
2
3
4
5
6
7
8
9

data: [{
    value:400,
    name:’搜索引擎’,
    itemStyle: {
        normal: {
            color: ’c23531’
        }
    }
}, ...]

但是這次因?yàn)橹挥忻靼刀鹊淖兓杂幸环N更快捷的方式是通過(guò) visualMap 組件將數(shù)值的大小映射到明暗度。

1
2
3
4
5
6
7
8
9
10
11
12

visualMap: {
    // 不顯示 visualMap 組件，只用于明暗度的映射
    show: false,
    // 映射的最小值為 80
    min: 80,
    // 映射的最大值為 600
    max: 600,
    inRange: {
        // 明暗度的范圍是 0 到 1
        colorLightness: [0, 1]
    }
}

文章來(lái)自：藍(lán)嵐愛(ài)肉肉

99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

兩個(gè)案例帶你入門ECharts

熱門帖子

Swift 教程

最新帖子

Xcode 9.4下載