前言
這次博主給大家分享一個既好用又能快速上手的資料可視化庫——ECharts.
先來給大家看看它所能呈現出來的效果，你們一定會震撼的！
當然不只是讓你們光震撼的，相信看完我的博客，你們每個人都能學會了!
ECharts 使用五步曲?
👉步驟1：下載并引入 echarts.js檔案—————————>圖表依賴這個 js庫
👉步驟2： 準備一個具備大小的DOM容器———————>生成的圖表會放入這個容器內
👉步驟3： 初始化 echarts實體物件——————————>實體化 echarts物件
👉步驟4： 指定配置項和資料（option）————————>根據具體需求修改配置選項
👉步驟5： 將配置項設定給 echarts實體物件——————>讓 echarts物件根據修改好的配置生效
接下來我們來詳細講每個步驟
1. 首先在官網選擇一個版本下載
官網地址：Apache ECharts
2. 引入 ECharts
<script src="echarts.min.js"></script>3. 準備一個具備大小的容器
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.min.js"></script>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(165, 204, 223);
}
</style>
</head>
<body>
<!-- 容器盒子 -->
<div class="box">
</div>
</body>4. 初始化 echarts 實體物件（準備作業）
<script>
var myChart = echarts.init(document.querySelector('.box'));
</script>5. 將圖表放到準備的容器中
① 先去官網的 示例 中選擇你要的圖表（這里我選了一個餅圖）
② 復制它的代碼到我們的js中，并將配置項設定給 echarts實體物件
<script>
var myChart = echarts.init(document.querySelector('.box'));
// 指定圖表的配置項和資料
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
myChart.setOption(option);
</script>效果如下：
千萬不要忘記要把我們的配置項（option）設定給 echarts 實體物件！！！
echarts的使用步驟👆到此就講解完啦，下面來說一些echarts常用的相關配置👇
1. ECharts 要熟悉的相關配置
| title | 標題組件 |
| tooltip | 提示框組件 |
| legend | 圖例組件 |
| toolbox | 工具列 |
| grid | 直角坐標系內繪圖網格 |
| xAxis | 直角坐標系 grid 中的 x 軸 |
| yAxis | 直角坐標系 grid 中的 y 軸 |
| series | 系列串列，每個系列通過 type 決定自己的圖表型別（什么型別的圖表） |
| color | 調色盤顏色串列 |
可能光看個圖表你們還是不知道什么代表的是哪塊區域的內容，下面的圖片可以幫助你理解
當然這些只是冰山一角，不過大家不要擔心，如果后面遇到不認識的可以去這里查找噢！👇
最后放幾個我在專案中做到的圖表，如果你們也要繪制類似圖表，那就可以白嫖啦?
（直接上js部分了，要引入jQuery.min.js，還有不要忘記自己加個盒子喲~）
1. 各省餅狀點位分布圖
效果展示：
代碼展示：
// 點位分布統計
(function () {
var myChart = echarts.init(document.querySelector(".pie"));
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
series: [
{
name: '點位統計',
type: 'pie',
radius: ["10%", "60%"],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 20, name: '云南' },
{ value: 26, name: '北京' },
{ value: 24, name: '山東' },
{ value: 25, name: '河北' },
{ value: 20, name: '江蘇' },
{ value: 25, name: '浙江' },
{ value: 30, name: '四川' },
{ value: 42, name: '湖北' }
],
label: {
fontSize: 10
},
labelLine: {
length: 6,
length2: 8
}
}
]
};
myChart.setOption(option);
// 當我們瀏覽器縮放的時候，圖表也等比例縮放
window.addEventListener("resize", function () {
myChart.resize();
})
})();
2. 全國用戶總量統計柱狀圖
效果展示：
代碼展示：
// 全國用戶總量統計
(function () {
var item = {
name: "",
value: 1200,
//修改當前柱形的樣式
itemStyle: {
color: "#254065"
},
// 滑鼠放到柱子上不想高亮顯示,把顏色改成一樣，原先什么顏色，滑鼠放上去后就是什么顏色
emphasis: {
itemStyle: {
color: "#254065"
}
},
// 滑鼠經過柱子不顯示提示框組件
tooltip: {
extraCssText: "opacity: 0"
}
}
var myChart = echarts.init(document.querySelector(".bar"));
option = {
color: new echarts.graphic.LinearGradient(
//(x1,y2)點到點（x2,y2）之間進行漸變
0, 0, 0, 1,
[
{ offset: 0, color: '#00fffb' }, // 0 起始顏色
{ offset: 1, color: '#0061ce' } // 1 結束顏色
]
),
tooltip: {
trigger: 'item'
},
grid: {
top:'3%',
left: '0%',
right: '3%',
bottom: '3%',
//容器左邊刻度標簽
containLabel: true,
show: true, //網格線
borderColor: "rgba(0,240,255,0.3)" //網格線顏色
},
xAxis: [
{
type: 'category',
data: ['上海', '廣州', '北京', '深圳', '合肥','','......', '','杭州','廈門','濟南','成都', '重慶'],
axisTick: {
// 讓x軸標簽在刻度中間顯示
alignWithLabel: false,
// 把x軸刻度隱藏起來，y軸不變
show: false
},
axisLabel: {
// 設定x軸的字體顏色
color: "#4c9bfd",
fontSize: 10
},
axisLine: {
// 設定 x軸的橫線顏色
lineStyle: {
color: "rgba(0,240,255,0.3)"
}
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
// 讓x軸標簽在刻度中間顯示
alignWithLabel: false,
// 把x軸刻度隱藏起來，y軸不變
show: false
},
axisLabel: {
// 設定x軸的字體顏色
color: "#4c9bfd"
},
axisLine: {
// 設定 x軸的橫線顏色
lineStyle: {
color: "rgba(0,240,255,0.3)"
}
},
// y軸分割線的顏色樣式
splitLine: {
lineStyle: {
color: "rgba(0,240,255,0.3)"
}
}
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [2100, 1900, 1700, 1560, 1400, item,item,item,900,750,600,480,240]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})();
3. 渠道分布圖
效果展示：
代碼展示：
// 銷售渠道模塊
(function () {
var myChart = echarts.init(document.querySelector("#radar"));
var option = {
tooltip: {
show: true,
// 控制提示框組件的顯示位置
position: ['60%', '10%']
},
radar: {
indicator: [
{ name: '機場', max: 100 },
{ name: '商場', max: 100 },
{ name: '火車站', max: 100 },
{ name: '汽車站', max: 100 },
{ name: '地鐵', max: 100 }
],
radius: "60%",
shape: 'circle',
// 分隔的段數
splitNumber: 4,
name: {
//修改雷達圖文字的顏色
textStyle: {
color: "#4c9bfd",
fontSize: 8
}
},
axisName: {
color: 'rgb(238, 197, 102)'
},
// 分隔圓圈線條的樣式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.5)"
}
},
splitArea: {
show: false
},
// 坐標軸的線修改為白色把透明
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
},
series: [
{
name: 'Beijing',
type: 'radar',
// 填充區域的線條顏色
lineStyle: {
width: 1,
opacity: 0.5,
color: '#fff'
},
data: [[90, 19, 56, 11, 34]],
// 設定圖形標記(拐點)，還可以取值'rect'方塊,'arrow'三角等
symbol: 'circle',
// 拐點的大小
symbolSize: 3,
// 設定小圓點的顏色
itemStyle: {
color: '#fff'
},
// 在小圓點上顯示相關資料
label: {
show: true,
color: '#fff',
fontSize: 10
},
// 修飾我們區域填充的背景顏色
areaStyle: {
color: 'rgba(238,197,102,0.6)'
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
})();4. 半圓形餅形圖設定方式
效果展示：
（中間的75%是用定位定在里面的）
代碼展示：
//半圓形餅形圖設定方式
(function () {
var myChart = echarts.init(document.querySelector(".gauge"));
var option = {
series: [
{
name: '銷售進度',
type: 'pie',
radius: ['130%', '150%'],
// 移動圖示位置，套住 75%
center: ['48%','80%'],
labelLine: {
show: false
},
// 餅形圖的起始角度為 180度，而不是旋轉角度,
// 支持范圍[0,360]
startAngle: 180,
// 滑鼠經過不放大
hoverOffset: 0,
data: [
{
value: 100,
itemStyle: {
//顏色漸變 #00c9e0->#005fc1
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [
{ offset: 0, color: "#00c9e0" }, //0 起始顏色
{ offset: 1, color: "#005fc1" } //1 結束顏色
]
)
}
},
{ value: 100, itemStyle: {color: '#12274d'}},
{
value: 200,
itemStyle: {
color: "transparent"
}
}
]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
})
})();5. 銷售統計模塊 （圖表搭配定時器使用）
效果展示：
代碼展示：
// 銷售統計模塊
(function () {
//設定四個資料
var data = {
year: [
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
],
quarter: [
[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
],
month: [
[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
],
week: [
[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
]
}
var myChart = echarts.init(document.querySelector(".line"));
option = {
color: ['#00f2f1', '#ed3f35'],
tooltip: {
trigger: 'axis'
},
legend: {
// 距離容器10%
right: "10%",
//修飾圖例文字的顏色
textStyle: {
color: "#4c9bfd"
},
//如果 series里面設定了 name,此時圖例組件的 data可以省略
// data: ['預期銷售額', '實際銷售額']
},
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
show: true,
borderColor: '#012f4a',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false, //需不需要內邊距，如果是 true，則線不會貼著y軸開始
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: {
show: false //去除刻度線
},
axisLabel: {
color: "#4c9bfd", //文本顏色
fontSize: 10
},
axisLine: {
show: false //去除軸線
}
},
yAxis: {
type: 'value',
axisTick: {
show: false //去除刻度線
},
axisLabel: {
color: "#4c9bfd" //文本顏色
},
splitLine: {
lineStyle: {
color: "#012f4a" //分割線顏色
}
}
},
series: [
{
name: '預期銷售額',
type: 'line',
stack: 'Total',
smooth: true,
data: data.year[0]
},
{
name: '實際銷售額',
type: 'line',
stack: 'Total',
smooth: true,
data: data.year[1]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
//切換
$('.sales .caption').on('click', 'a', function () {
//樣式
index = $(this).index() - 1;
$(this).addClass("active").siblings("a").removeClass("active");
var currDate = data[this.dataset.type];
option.series[0].data = currDate[0];
option.series[1].data = currDate[1];
// 重新配好的資料給實體物件
myChart.setOption(option)
})
//自動切換
var as = $(".sales .caption a");
var index = 0;
var timer = setInterval(function () {
index++;
if (index >= 4) {
index = 0;
}
as.eq(index).click();
}, 1000)
//滑鼠進入停止定時器，離開，開啟定時器
$(".sales").hover(function () {
clearInterval(timer);
}, function () {
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index >= 4) {
index = 0;
}
as.eq(index).click();
}, 1000);
})
})();
6. ECharts地圖的使用
（前提：還要再去官網下載并引入 china.js 檔案）
效果展示：
代碼展示：
(function () {
var myChart = echarts.init(document.querySelector(".geo"));
var geoCoordMap = {
靈寶: [110.8945, 34.51682],
韶關: [113.591544, 24.801322],
洛陽: [112.434468, 34.663041],
長治: [113.113556, 36.191112],
宿州: [116.984084, 33.633891],
信陽: [114.075031, 32.123274],
蕪湖: [118.376451, 31.326319],
景德鎮: [117.214664, 29.29256],
吉安: [114.986373, 27.111699],
九江: [115.992811, 29.712034],
寧都: [116.01565, 26.47227],
長汀: [116.35888, 25.82773],
南昌: [115.892151, 28.676493],
贛州: [114.940278, 25.85097],
梅州: [116.117582, 24.299112],
龍川: [115.26025, 24.10142],
大埔: [116.69662, 24.35325],
汕頭: [116.708463, 23.37102],
南雄: [114.30966, 25.11706],
廣州: [113.280637, 23.125178],
寶安: [113.88311, 22.55371],
陽江: [111.975107, 21.859222],
桂平: [110.08105, 23.39339],
信宜: [110.94647, 22.35351],
欽州: [108.624175, 21.967127],
海口: [110.33119, 20.031971],
柳州: [109.411703, 24.314617],
榕江: [108.52072, 25.92421],
鳳山: [107.04892, 24.54215],
韶光: [113.591544, 24.801322],
賀州: [111.552056, 24.414141],
郴州: [113.032067, 25.793589],
邵陽: [111.46923, 27.237842],
常德: [111.691347, 29.040225],
恩施: [109.47942, 30.29502],
重慶: [106.504962, 29.533155],
惠州: [114.412599, 23.079404],
龍巖: [117.02978, 25.091603],
高雄: [120.311922, 22.620856],
臺北: [121.56517, 25.037798],
中山: [113.382391, 22.521113],
廣元: [105.829757, 32.433668],
成都: [104.065735, 30.659462],
會理: [102.24539, 26.65627],
憑祥: [106.75534, 22.10573],
};
var BJData = [
[
{
name: '宿州',
},
{
name: '蕪湖',
value: 60,
},
],
[
{
name: '靈寶',
},
{
name: '靈寶',
value: 60,
},
],
[
{
name: '長治',
},
{
name: '長治',
value: 60,
},
],
[
{
name: '洛陽',
},
{
name: '洛陽',
value: 60,
},
],
[
{
name: '靈寶',
},
{
name: '信陽',
value: 60,
},
],
[
{
name: '長治',
},
{
name: '宿州',
value: 60,
},
],
[
{
name: '洛陽',
},
{
name: '信陽',
value: 60,
},
],
[
{
name: '信陽',
},
{
name: '吉安',
value: 60,
},
],
];
var SHData = [
[
{
name: '南昌',
},
{
name: '南昌',
value: 60,
},
],
[
{
name: '信陽',
},
{
name: '景德鎮',
value: 60,
},
],
[
{
name: '蕪湖',
},
{
name: '景德鎮',
value: 60,
},
],
[
{
name: '景德鎮',
},
{
name: '長汀',
value: 60,
},
],
[
{
name: '南昌',
},
{
name: '贛州',
value: 60,
},
],
];
var GZData = [
[
{
name: '吉安',
},
{
name: '南雄',
value: 60,
},
],
[
{
name: '寧都',
},
{
name: '寧都',
value: 60,
},
],
[
{
name: '南雄',
},
{
name: '惠州',
value: 60,
},
],
[
{
name: '贛州',
},
{
name: '龍川',
value: 60,
},
],
[
{
name: '寧都',
},
{
name: '梅州',
value: 60,
},
],
[
{
name: '長汀',
},
{
name: '龍巖',
value: 60,
},
],
];
var WJData = [
[
{
name: '梅州',
},
{
name: '汕頭',
value: 60,
},
],
[
{
name: '汕頭',
},
{
name: '高雄',
value: 60,
},
],
[
{
name: '高雄',
},
{
name: '臺北',
value: 60,
},
],
[
{
name: '龍川',
},
{
name: '寶安',
value: 60,
},
],
[
{
name: '惠州',
},
{
name: '廣州',
value: 60,
},
],
[
{
name: '廣州',
},
{
name: '桂平',
value: 60,
},
],
[
{
name: '桂平',
},
{
name: '柳州',
value: 60,
},
],
[
{
name: '韶關',
},
{
name: '韶關',
value: 60,
},
],
[
{
name: '柳州',
},
{
name: '榕江',
value: 60,
},
],
[
{
name: '柳州',
},
{
name: '鳳山',
value: 60,
},
],
[
{
name: '惠州',
},
{
name: '中山',
value: 60,
},
],
[
{
name: '中山',
},
{
name: '陽江',
value: 60,
},
],
[
{
name: '韶關',
},
{
name: '賀州',
value: 60,
},
],
[
{
name: '韶關',
},
{
name: '郴州',
value: 60,
},
],
[
{
name: '郴州',
},
{
name: '邵陽',
value: 60,
},
],
[
{
name: '邵陽',
},
{
name: '常德',
value: 60,
},
],
[
{
name: '常德',
},
{
name: '恩施',
value: 60,
},
],
[
{
name: '恩施',
},
{
name: '重慶',
value: 60,
},
],
[
{
name: '重慶',
},
{
name: '成都',
value: 60,
},
],
[
{
name: '重慶',
},
{
name: '廣元',
value: 60,
},
],
[
{
name: '重慶',
},
{
name: '會理',
value: 60,
},
],
];
var JGData = [
[
{
name: '中山',
},
{
name: '信宜',
value: 60,
},
],
[
{
name: '信宜',
},
{
name: '欽州',
value: 60,
},
],
[
{
name: '桂平',
},
{
name: '憑祥',
value: 60,
},
],
[
{
name: '信宜',
},
{
name: '海口',
value: 60,
},
],
];
var planePath =
'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([
{
coord: fromCoord,
},
{
coord: toCoord,
},
]);
}
}
return res;
};
var color = ['#FF8888', ' #ffa022', '#a6c84c', '#3ed4ff', ' #E38EFF'];
var series = [];
[
['長治', BJData],
['景德鎮', SHData],
['寧都', GZData],
['汕頭', WJData],
['信宜', JGData],
].forEach(function (item, i) {
series.push(
{
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3,
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2,
},
},
data: convertData(item[1]),
},
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15,
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2,
},
},
data: convertData(item[1]),
},
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15,
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2,
},
},
data: convertData(item[1]),
},
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15,
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2,
},
},
data: convertData(item[1]),
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke',
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
},
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i],
},
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
};
}),
}
);
});
var option = {
// backgroundColor: '#080a20',
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data: [],
textStyle: {
color: '#fff',
},
selectedMode: 'single',
},
geo: {
map: 'china',
zoom: 1.2,
scaleLimit: {
//控制滾輪縮放大小
max: 8,
min: 1,
},
label: {
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4',
},
emphasis: {
areaColor: '#0b1c2d',
},
},
},
series: series,
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
})
})()這次的分享到這里就結束了，按照我說的步驟，自己動手試一試吧😊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330338.html
標籤：其他
上一篇：一張思維導圖入門React
下一篇：vue - 實作省市區的級聯選擇