之前自學的時候也使用過echarts來制作柱狀圖，折線圖，地圖，現在想想那時候做的簡直是太LOW了，就是簡單的在官網上，模仿人家的示例代碼，改改數據，就可以了，原生態的，樣子果然是很丑。
在我們的項目中，我們自己封裝了echarts指令，只用自己定義一下樣式，然后調用數據接口，就可以了，這里先不多說封裝指令了，現在先說說怎么調整樣式
我自己寫的一個代碼為例，以折線圖為例
一 . 問題匯總： 折線圖問題與解決
- 折線圖中的多條折線，怎么設置？
- 怎么設置echarts的背景顏色？
- 怎么設置X軸，Y軸的坐標線的顏色？
- 怎么將X軸的數據傾斜顯示？
- 怎么讓你的折線有弧度？
初始樣式如圖，以及要解決的問題：
我的博客地址 http://blog.zhouminghang.xyz
二. 前提準備條件
- 要使用echarts，首先要在你的頁面中
引入echarts.js； - 要在.html文件中，設置一個
容器，并給它設置寬高屬性；- 再次聲明，
必須給容器設置寬高，它是用來給畫布提供一個空間，否則是不會顯示的；
- 再次聲明，
- 最后就是關于echarts的配置；
- 可以單獨寫一個js文件，然后引進來；
- 也可以直接在index.html中寫一個
<script> // 相關代碼 </script>
index.html文件代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--第一步： 引入 ECharts 文件 -->
<script src="js/node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!--第二步：指定一個容器用來存放echarts，也就是一個設置寬高屬性的 DOM節點 -->
<div id="box" style="width: 600px;height:400px;"></div>
</body>
</html>
我這里圖方便，js就直接寫在html文件里了
<script>
// 獲取到這個DOM節點，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的內容基本涵蓋你要畫的圖表的所有內容
var option = {
// 定義樣式和數據
}
// 一定不要忘了這個，具體是干啥的我忘了，官網是這樣寫的使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
注意：
你在寫myChart.setOption(option);這行代碼的時候一定不要忘了這個myChart是要和你上面定義的var 變量名對應起來，比如var myChart = echarts.init(document.getElementById("box"));
舉個栗子吧：
如果你定義的變量名是oMyChart,那你就這樣寫：
var oMyChart = echarts.init(document.getElementById("box"));
var option = {
// 定義樣式和數據
}
oMyChart.setOption(option);
關鍵內容都在option中
var option = {
backgroundColor: '#FBFBFB',
tooltip : {
trigger: 'axis'
},
legend: {
data:['充值','消費']
},
calculable : true,
xAxis : [
{
axisLabel:{
rotate: 30,
interval:0
},
axisLine:{
lineStyle :{
color: '#CECECE'
}
},
type : 'category',
boundaryGap : false,
data : function (){
var list = [];
for (var i = 10; i <= 18; i++) {
if(i<= 12){
list.push('2016-'+i + '-01');
}else{
list.push('2017-'+(i-12) + '-01');
}
}
return list;
}()
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle :{
color: '#CECECE'
}
}
}
],
series : [
{
name:'充值',
type:'line',
symbol:'none',
smooth: 0.2,
color:['#66AEDE'],
data:[800, 300, 500, 800, 300, 600,500,600]
},
{
name:'消費',
type:'line',
symbol:'none',
smooth: 0.2,
color:['#90EC7D'],
data:[600, 300, 400, 200, 300, 300,200,400]
}
]
};
三. 問題解決
3.1 怎么給echarts的容器添加背景色？
這是我碰到的第一個坑，你是不是和我一樣，直接給容器添加了background-color屬性，但是你會發現并沒有什么卵用
代碼如下：
<div id="box" style="width: 600px; height:400px; background-color: pink;"></div>
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
你會發現背景色應用不上，這里我自己認為，echarts畫折線圖什么的，就相當于是使用canvas在畫圖，它在畫圖前已經將畫布初始化了，所以給容器添加背景色是不行的，那么怎么辦呢？
解決辦法：
- 要在
optionecharts圖的配置中進行配置，添加background-color屬性； - 為了區別，看看到底是給
容器添加的背景色應用上了，還是option中的背景色應用上了； - 我們設置
容器背景為粉色，設置echarts中的option為#FBFBFB；
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="box" style="width: 1000px; height:500px; background-color: pink;"></div>
<script>
// 獲取到這個DOM節點，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的內容基本涵蓋你要畫的圖表的所有內容
// 定義樣式和數據
var option = {
// 給echarts圖設置背景色
backgroundColor: '#FBFBFB', // -----------> // 給echarts圖設置背景色
tooltip: {
trigger: 'axis'
},
legend: {
data: ['充值', '消費']
},
calculable: true,
xAxis: [{
type: 'category',
// boundaryGap: false,
data: function() {
var list = [];
for (var i = 10; i <= 18; i++) {
if (i <= 12) {
list.push('2016-' + i + '-01');
} else {
list.push('2017-' + (i - 12) + '-01');
}
}
return list;
}()
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '充值',
type: 'line',
data: [800, 300, 500, 800, 300, 600, 500, 600]
}, {
name: '消費',
type: 'line',
data: [600, 300, 400, 200, 300, 300, 200, 400]
}]
};
// 一定不要忘了這個，具體是干啥的我忘了，官網是這樣寫的使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
區別以及效果：
在這里我同時給容器添加背景色，在echarts配置中設置背景色，一會我們看看是哪個背景色作用上了，代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
很顯然，配置里的背景色應用上了，所以直接給容器設置背景是行不通的，效果如圖所示：
我的博客地址 http://blog.zhouminghang.xyz
3.2 怎么設置多條折線以及每條折線的顏色
- 在
series中以數組形式添加多組數據即可； - 在每條折線里面直接添加
color: ['相應的顏色']
代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
效果圖如下：
我的博客地址 http://blog.zhouminghang.xyz
3.3 去掉小圓點
- 設置
symbol: 'none'
代碼對比：
我的博客地址 http://blog.zhouminghang.xyz
效果對比：
我的博客地址 http://blog.zhouminghang.xyz
3.4 設置折線圖的弧度
- 設置
smooth屬性 - 屬性值在
0-1之間
代碼對比圖：
我的博客地址 http://blog.zhouminghang.xyz
效果對比圖：
我的博客地址 http://blog.zhouminghang.xyz
3.5 設置坐標軸的顏色
為了讓效果顏色更加明顯，就給坐標軸添加比較顯眼的顏色，只做個示范用，項目中肯定不會用這么重的顏色，一般使用灰色系的顏色比較淡的
- 設置X軸顏色為紅色
- 在xAxis下添加
axisLine: {
lineStyle: {
color: 'red'
}
},
- 同理設置Y軸
代碼：
我的博客地址 http://blog.zhouminghang.xyz
效果圖：
我的博客地址 http://blog.zhouminghang.xyz
3.6 怎么讓折線圖從X軸0刻度開始
- 設置
boundaryGap: false,
代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
3.7 怎么讓X軸的時間這組數據旋轉
有時候我們X軸數據比較長又比較多的時候，水平放置肯定成不下，那我們就讓它傾斜著放，這樣就可以放更多的數據。
好了，廢話不多說，看代碼：
我的博客地址 http://blog.zhouminghang.xyz
效果如圖：
我的博客地址 http://blog.zhouminghang.xyz
四. 突然發現我寫的有個小問題，少了一組數據，很尷尬的趕腳
- 你可以直接在
data中添加一組數據 - 哈哈，我比較懶，就直接修改那個判斷條件，
將i<=18改成i<18;
完整的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="box" style="width: 1000px; height:500px; background-color: pink;"></div>
<script>
// 獲取到這個DOM節點，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的內容基本涵蓋你要畫的圖表的所有內容
var option = {
// 定義樣式和數據
backgroundColor: '#FBFBFB',
tooltip: {
trigger: 'axis'
},
legend: {
data: ['充值', '消費']
},
calculable: true,
xAxis: [{
axisLabel: {
rotate: 30,
interval: 0
},
axisLine: {
lineStyle: {
color: 'red'
}
},
type: 'category',
boundaryGap: false,
data: function() {
var list = [];
for (var i = 10; i < 18; i++) {
if (i <= 12) {
list.push('2016-' + i + '-01');
} else {
list.push('2017-' + (i - 12) + '-01');
}
}
return list;
}()
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#CECECE'
}
}
}],
series: [{
name: '充值',
type: 'line',
symbol: 'none',
smooth: 0.3,
color: ['#66AEDE'],
data: [800, 300, 500, 800, 300, 600, 500, 600]
}, {
name: '消費',
type: 'line',
symbol: 'none',
smooth: 0.3,
color: ['#90EC7D'],
data: [600, 300, 400, 200, 300, 300, 200, 400]
}]
};
// 一定不要忘了這個，具體是干啥的我忘了，官網是這樣寫的使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
效果如圖：
我的博客地址 http://blog.zhouminghang.xyz
五. 鼠標放在折線上，顯示該折點的數據
在 series 中添加 itemStyle : { normal: {label : {show: true}}},
item123.png
效果如下：
數據123.png
注：鼠標不放在上面是不會顯示該點數據的。
折點數據 設置背景色
在series中添加樣式：
itemStyle : { normal: {
label : {show: true,color:'white',backgroundColor:'black'}
}},
我在echarts 官方demo上加了一下，效果如下：
折點背景1111.png
把以下代碼，放到echarts的一個demo下，替換之后，運行可查看效果：
地址https://echarts.baidu.com/examples/editor.html?c=line-marker
option = {
title: {
text: '未來一周氣溫變化',
subtext: '純屬虛構'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高氣溫','最低氣溫']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高氣溫',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
itemStyle : { normal: {
label : {show: true,color:'white',backgroundColor:'black'}
}},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低氣溫',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高點'
}]
]
}
}
]
};
