主要用折線圖和柱狀圖舉例
1，X軸刻度資訊日期自動排開：
我們擷取一個日期的開始時間和結束時間，放上去會自動生成中間每一天的日期放在X軸上
把這兩個函數放methods内。
getAll(begin, end) {
let arr1 = begin.split("-"); //這裡可以換成/ 就2020/01/1 這種
let arr2 = end.split("-");
let arr1_ = new Date();
let arrTime = [];
arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
let arr2_ = new Date();
arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
let unixDb = arr1_.getTime();
let unixDe = arr2_.getTime();
for (let k = unixDb; k <= unixDe;) {
arrTime.push(this.datetimeparse(k, 'YY-MM-DD'));
k = k + 24 * 60 * 60 * 1000;
}
return arrTime;
},
// 時間格式處理
datetimeparse(timestamp, format, prefix) {
if (typeof timestamp == 'string') {
timestamp = Number(timestamp)
};
//轉換時區
let currentZoneTime = new Date(timestamp);
let currentTimestamp = currentZoneTime.getTime();
let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西區，西區晚
let offset = null;
//用戶端時間與伺服器時間保持一緻，固定中原標準時間東八區。
offset = offsetZone + 8;
currentTimestamp = currentTimestamp + offset * 3600 * 1000
let newtimestamp = null;
if (currentTimestamp) {
if (currentTimestamp.toString().length === 13) {
newtimestamp = currentTimestamp.toString()
} else if (currentTimestamp.toString().length === 10) {
newtimestamp = currentTimestamp + '000'
} else {
newtimestamp = null
}
} else {
newtimestamp = null
};
let dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date()
let YYYY = dateobj.getFullYear()
let MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1)
let DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate()
let HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours()
let mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes()
let ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds()
let output = '';
let separator = '/'
if (format) {
separator = format.match(/-/) ? '-' : '/'
output += format.match(/yy/i) ? YYYY : ''
output += format.match(/MM/) ? (output.length ? separator : '') + MM : ''
output += format.match(/dd/i) ? (output.length ? separator : '') + DD : ''
output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : ''
output += format.match(/mm/) ? (output.length ? ':' : '') + mm : ''
output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : ''
} else {
output += YYYY + separator + MM + separator + DD
}
output = prefix ? (prefix + output) : output
return newtimestamp ? output : ''
}
然後調用傳入開始時間和結束時間就可以了。
我這裡aa和bb是我自己定的開始和結束的時間變量。topGraph是圖表，把timearr傳參進去，放在X軸的data後面就行了。
mounted() {
//把起始結束日期放進去，計算出中間所有日期
let timearr = this.getAll(this.aa, this.bb);
//參數傳給echarts圖渲染出來X軸
this.topGraph(timearr);
},
2，Y軸左右雙軸：Y軸左邊有一排數字，右邊也有一排
這樣寫就行。
yAxis: [
{
type: "value",
min: 0, //最小
max: 400,//最大值
interval: 100,//間隔多少
axisLabel: {
formatter: "{value} ",
},
},
{
type: "value",
min: 50,
max: 110,
interval: 20,
axisLabel: {
formatter: "{value} ",
},
},
],
3，Y軸添加百分比
yAxis: [
{
type: "value",
min: 0,
max: 300,
interval: 50,
axisLabel: {
formatter: "{value} ",
},
},
{
type: "value",
min: 30,
max: 90,
interval: 20,
axisLabel: {
formatter: "{value}"+'%',//這個地方加個百分比符号拼接就行，這是加在Y軸右邊的。如果想要Y軸左邊就加上面
},
},
],
4，series資料加百分比字尾
添加formatter，符号的意思參考官方文檔
tooltip: {
trigger: "axis",
formatter:
"{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}<br />{a3}: {c3}",
},
5，title的位置更改
title: {
text: "趨勢圖",
left: "center",調title位置，可以右中右，也可以給數字，改值就行。
//left：20 //這種是給數字的
},
6，legend的位置更改
跟上面一樣的，不多說
legend: {
data: ["調整前", "調整後"],
left: 10,
top: 30,
},
7，改變圖表大小
可以用數字和百分比
grid: {
left: "3%",
right: "4%",
bottom: 80,
containLabel: true,
},
8，圖表自适應
放在myChart.setOption(option);下面就行了，然後給你的盒子設定自适應，如果定死了寬高還是不能自适應的
//監聽，根據視口變化動态從新渲染表格
window.addEventListener("resize", function () {
myChart.resize();
});
9，X軸刻度資訊傾斜
xAxis: {
type: "category",
boundaryGap: false,
//X軸刻度資訊
data: ["9月","10月"],
axisLabel: {
interale: 0, //坐标軸刻度标簽的顯示間隔,設定成 0 強制顯示所有标簽
rotate: 40, //設定日期顯示樣式（傾斜度)還可以負值
},
},
10，節點數值預設顯示
series: [
{
name: "檢測數量",
type: "bar",
data: [220, 229,234],
//加一個這個label就可以了。按這個設定。
label: {
show: true,
formatter: function (data) {
return data.value;
},
},
},]
11，折線圖變虛線顯示
添加lineStyle部分
series: [
{
name: "檢測數量",
type: "bar",
data: [220, 229,234],
//加一個這個lineStyle就可以了。按這個設定。
lineStyle: {
color: "#FF0000",
width: 2,
type: "dashed",
},
},
},]
12，折線和柱子的顔色
直接加color就行，幾個資料條就對應幾個顔色，按順序對應
var option = {
color: ["#f8cbad", "#a5a5a5", "#636363","#4472c4", "#ffe699"],
}
13，折線圖節點實心和節點大小改變
如果symbolSize改成0就不顯示節點了。
series: [
{
name: "檢測數量",
type: "bar",
data: [220, 229,234],
//這兩個，上面是實心，下面是大小
symbol: "circle",
symbolSize: 9,
},
},]
14，legend分行寫法
這樣就分了兩行，并用bottom定好各自的位置别重疊了。可以自己改
legend: [
{
data: [
"檢測數量",
"檢測數量",
"檢測數量",
"檢測數量",
"檢測數量",
],
bottom: 30,
},
{
data: [
"A級率",
"A級率",
"A級率",
"A級率",
"A級率",
"平均 A級率",
],
bottom: 10,
}
],
15，柱狀圖和折線圖共存圖
series: [
{
name: '蒸發量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
//bar是柱狀圖
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均溫度',
//這個代表折線
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
16，折線依據右邊Y軸資料
series: [
{
name: "檢測數量",
type: "bar",
data: [220, 229,234],
//添加這個就是根據右邊的數值顯示，如果删除就根據左邊的顯示
yAxisIndex: 1,
},]
17，toolbox五個按鈕
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
18，滑鼠移動上去出現提示框
tooltip: {
trigger: "item",
},
19，圓環圖引導線位置放在外圍
series内
20，柱狀圖漸變色
series内
{
type: "bar",
showBackground: false,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
]),
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
]),
},
},
21，柱狀圖寬度
series内
22，柱狀圖自動排序，排序自動讓Y軸名字跟着資料動
series内
23，讓折線圖變成曲線
在series中添加這個屬性
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)