Echarts折線圖改變樣式
1.Echarts的引用必須是在上方 若是放在下方有可能會造成報錯 如果是用新的js檔案寫echarts需要把echarts的引入和js的引入放在一起 不然有可能會照成echarts is not defined報錯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折線圖</title>
</head>
<body>
<div id="main" style="width: 700px; height: 800px;"></div><!-- canvas畫布大小 必須要寫寬高 -->
<script src="echarts.min.js"></script> <!--要改成自己的路徑 -->
<script>
/* 柱狀圖 */
var myChart = echarts.init(document.getElementById('main'));
var option = {
// 标題
title: {
text: '風險分析',
textStyle: {
fontSize: 28, //标題字型的大小
}
},
/* 改變柱狀圖的位置 */
grid: {
x: 60,
y: 100,
x2: 100,
y2: 50,
},
/* 自定義 */
tooltip: {
show: true
},
/* 圖例 */
legend: {
left: 'right', //文字居左右
data: ['風險個數'],
textStyle: { //圖例文字的樣式
fontSize: 22
},
},
xAxis: [{
type: 'category',
name: '風險系數', //下标題
nameTextStyle: { //改變下标題大小
fontSize: 21
},
data: ["高風險", "中風險", "低風險"],
axisLabel: {
show: true,
textStyle: {
fontSize: 20,//橫軸字型的大小
}
}
}],
yAxis: [{
type: 'value',
name: '個數',
nameTextStyle: {
fontSize: 20 //縱軸标題字型的大小
},
axisLabel: {
show: true,
textStyle: {
fontSize: 20,//縱軸字型的大小
}
}
}],
series: [{
"name": "風險個數",
"type": "bar",
barWidth: '100',//柱子的寬度
"data": [2, 3, 3],
itemStyle: {
normal: {
color: 'pink',//改變柱子的顔色
label: {
show: true, //開啟顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'pink',//改變柱子上方數字顔色
fontSize: 24 //改變柱子上方數字的大小
}
}
}
},
}]
};
// 為echarts對象加載資料
myChart.setOption(option);
</script>
</body>
</html>
![leetcode電話号碼的字母組合[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)