最近一直使用echarts畫折線圖，在此做個記錄
最後樣式
代碼
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script>
<!-- 引入 jquery 和echarts -->
</head>
<body>
<div id="container" style="height: 800px;width:1200px;margin-left:300px"></div>
<!-- 用來畫折線圖的div -->
<script type="text/javascript">
var YY= [1,2,3,4,5];//y軸的數據
var XX= ['座標1','座標2','座標3','座標4','座標5'];//x軸的數據
function fetchData(){
//異步加載數據，此處可以進行ajax請求，然後返回數據
setTimeout(function(){
myChart.hideLoading();//關閉動畫
//賦值
myChart.setOption({
xAxis: {data: XX},
series: [{
data: YY,
}]
});
}, 2000);
}
// 初始 option
var myChart = echarts.init(document.getElementById("container"));
option = null;
option = {
title: {
//標題
text: '折線圖',// 主標題
subtext: '練習',// 副標題
//標題位置
x: 'center',
y:'10',
// 主標題文字設置
textStyle: {
fontSize: 30, // 文字大小
fontWeight: 900, // 文字加粗
color: 'rgb(13, 14, 78)' // 文字顏色
},
// 副標題文字顏色
subtextStyle: {
color: '#aaa' // 文字顏色
}
},
color : ['rgba(51, 102, 255,0.8)'],//折線顏色
//工具欄
toolbox: {
show: true,
itemSize: 20,
x: 'center',
y:70,
feature: {
//自定義工具欄，
myTool1: {
show: true,
title: 'Excel導出',
//自處可以放圖片
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
//列標題，逗號隔開，每一個逗號就是隔開一個單元格
var str = 'x軸,y軸\n';
//增加\t爲了不讓表格顯示科學計數法或者其他格式
for(var i = 0 ; i < XX.length; i++ ){
str+=XX[i] + '\t,'+YY[i];
str+='\n';
}
//encodeURIComponent解決中文亂碼
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通過創建a標籤實現
var link = document.createElement("a");
link.href = uri;
//對下載的文件命名
link.download = "json數據表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
},
lineChart :{},// '折線圖切換',
barChart :{},// '柱形圖切換',
saveAsImage: {} ,//保存爲圖片,
//自定義數據視圖
dataView: {
show: true,
readOnly: true,
title: '數據視圖',
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var tdHeads = '<td style="width:400px;">x座標軸</td>';
series.forEach(function (item) {
tdHeads += '<td style="width:400px;">y座標軸</td>';
});
// var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+'</tr>';
var table = '<table border="1" align="center" style="width:800px;color:black"><tbody><tr>'+tdHeads+'</tr>';
var tdBodys = '';
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
if(typeof(series[j].data[i]) == 'object'){
tdBodys += '<td style="width:400px;">'+series[j].data[i].value+'</td>';
}else{
tdBodys += '<td style="width:400px;">'+ series[j].data[i]+'</td>';
}
}
table += '<tr><td >'+axisData[i]+'</td>'+ tdBodys +'</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
magicType: {type: ['line', 'bar']}
}
},
//x軸設置
xAxis: {
name:'x座標軸',
type: 'category',
nameTextStyle:{
fontSize: 30,//座標軸名字字體大小
},
data:[],
axisLabel: {
interval: 0,//0表示讓所有座標值全部顯示，數字表示間隔
rotate:0,//讓座標值旋轉一定的角度，當x軸數據文字過長，可讓數據傾斜顯示
textStyle: {
color: 'red', //更改座標軸文字顏色
fontSize : '30', //更改座標軸文字大小
}
},
},
yAxis: {
name:'y座標軸',
show: true,
type: 'value',
nameTextStyle:{
fontSize: 30,//座標軸名字字體大小
},
//隱藏刻度線
axisLine: {
show: false,
},
//隱藏軸線
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: 'red', //更改座標軸文字顏色
fontSize : '30', //更改座標軸文字大小
}
},
},
//生成的折線圖的位置
grid: {
top: '150',
left:'30',
right:'130',
containLabel: true//爲ture纔會生效以上的設置
},
// 標註 即 最大值，最小值的樣式設置
markPoint : {
// color: 'rgb(30, 144, 255)',
symbol: 'pin', // 標註類型
symbolSize: 123, // 標註大小，半寬（半徑）參數，當圖形爲方向或菱形則總寬度爲symbolSize * 2
},
//提示樣式設置 即鼠標在折線圖上移動時的提示
tooltip: {
trigger: 'axis', // 觸發類型，座標軸觸發
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 200, // 隱藏延遲，單位ms
transitionDuration : 0.4, // 動畫變換時間，單位s
backgroundColor: 'rgba(153, 0, 255,0.7)', // 提示背景顏色，默認爲透明度爲0.7的黑色
borderColor: '#333', // 提示邊框顏色
borderRadius: 4, // 提示邊框圓角，單位px，默認爲4
borderWidth: 0, // 提示邊框線寬，單位px，默認爲0（無邊框）
padding: [5,5,5,0], // 提示內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'cross', // 默認爲直線，可選爲：'line' | 'shadow'
lineStyle : { // 直線指示器樣式設置
width: 1,
fontSize:30,
},
shadowStyle : { // 陰影指示器樣式設置
width: 'lift', // 陰影大小
color: 'rgba(150,150,150,0.3)' // 陰影顏色
}
},
formatter:function(data){
//自定義顯示內容
var rsl='';
rsl = "x軸的數據 ： " + data[0].name;
rsl+= "<br/>y軸的數據 ： " + data[0].data;
return rsl;
},
textStyle: {
//提示內容字體設置
color: '#fff'
}
},
series: [
{
type:'line',
lineStyle:{
width:3, // 設置線寬
type:'solid' //'dotted'虛線 'solid'實線
},
smooth: true,
// color:'red',
symbol:'star',//拐點樣式
// symbolSize:30,
symbolSize:1,//拐點大小
markLine: {data: [{type: 'average', name: '平均值'}]},
markPoint: {
itemStyle:{
borderColor: '#000',//圖形的描邊顏色。支持的顏色格式同 color，不支持回調函數。
borderWidth: 0,//描邊線寬。爲 0 時無描邊。
borderType: 'solid' //柱條的描邊類型，默認爲實線，支持 ‘solid’, ‘dashed’, ‘dotted’。
},
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
],
},
},
]
};
myChart.showLoading();//啓動動畫
fetchData();//獲取值
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>