這是我寫的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ECharts體驗</title>
<style>
.box {
width: 100%;
height: 800px;
}
</style>
<!-- 1. 下載引入EChart.js 檔案 -->
<script src="https://bbs.csdn.net/topics/js/echarts.min.js"></script>
</head>
<body>
<!-- 2. 準備一個盒子用來裝生成的圖表 注意： 這個盒子必須具備大小 -->
<div class="box"></div>
<script>
// 3.初始化echarts 實體物件
var myChart = echarts.init(document.querySelector(".box"));
// 4. 指定配置項和資料
var option = {
tooltip: {
trigger: "axis"
},
xAxis: [
{
type: "category",
data: ["2016", "2017", "2018", "2019"]
// boundaryGap: 0
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "Ⅳ～Ⅴ類",
type: "line",
symbolOffset: ["-60", 0],
data: [6.3, 16, 31.1, 42.7],
lineStyle: {
normal: {
width: 0,
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#efefef" // 0% 處的顏色
},
{
offset: 1,
color: "#efefef" // 100% 處的顏色
}
],
globalCoord: false // 預設為 false
},
shadowColor: "rgba(72,216,191, 0.3)",
shadowBlur: 10,
shadowOffsetY: 20
}
},
//圓環
itemStyle: {
normal: {
color: "#3fa7dc",
borderWidth: 40,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#3fa7dc"
}
},
smooth: true
},
{
symbolOffset: [60, 0],
name: "Ⅳ～Ⅴ類",
type: "line",
data: [8, 12, 40, 25],
lineStyle: {
normal: {
width: 0,
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#efefef" // 0% 處的顏色
},
{
offset: 1,
color: "#efefef" // 100% 處的顏色
}
],
globalCoord: false // 預設為 false
},
shadowColor: "rgba(72,216,191, 0.3)",
shadowBlur: 10,
shadowOffsetY: 20
}
},
//圓環
itemStyle: {
normal: {
color: "#3fa7dc",
borderWidth: 40,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#3fa7dc"
}
},
smooth: true
}
//圓環的分割線
// {
// name: "平行于y軸的趨勢線",
// type: "line",
// markLine: {
// symbol: "none", //去掉箭頭
// name: "aa",
// lineStyle: {
// width: 2,
// type: "solid" //'dotted'虛線 'solid'實線
// },
// data: [
// [
// {
// coord: ["2018", 25] //分割線y開始坐標
// },
// {
// coord: ["2018", 35] //分割線y結束坐標
// } //如何獲取grid上側最大值，目前是寫死的
// ]
// ]
// }
// },
//圓環的分割線
// {
// name: "平行于y軸的趨勢線1",
// type: "line",
// symbolOffset: [-60, 0],
// markLine: {
// symbol: "none", //去掉箭頭
// name: "aa",
// lineStyle: {
// width: 2,
// type: "solid" //'dotted'虛線 'solid'實線
// },
// data: [
// [
// {
// coord: ["2016", 5] //分割線y開始坐標
// },
// {
// coord: ["2016", 12] //分割線y結束坐標
// } //如何獲取grid上側最大值，目前是寫死的
// ]
// ],
// symbolOffset: [-60, 0]
// }
// }
]
};
// 5. 將配置項和資料(option) 設定給 實體物件(myChart)
myChart.setOption(option);
</script>
</body>
</html>
```
```
各位大神幫忙看看這種圖怎么做，目前只能把圓圈做出來，豎線不知道怎么做，用markLine配置了，圖例位置移動了，也沒做出來，各位大佬幫忙看看怎么做
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/140072.html
標籤：其他