eCharts圖表實(shí)現(xiàn)扇形和折線圖代碼示例
前端步驟：
1.引入需要的文件
2.設(shè)置一個(gè)有大小的盒子
3.設(shè)置數(shù)據(jù)，創(chuàng)建一個(gè)方法，發(fā)送請求（分析需要的數(shù)據(jù)，統(tǒng)計(jì)店鋪和用戶的總數(shù)占比）
4.接收到數(shù)據(jù)給定義的變量接著
5.初始化就加載圖形new echarts.init(document.getElementById('pieBox'))給一個(gè)變量
6.最后在myChart.setOption({})中寫復(fù)制粘貼過來的東西，把定義死的數(shù)據(jù)用請求接收過來的變量賦值，并更改需要修改的地方
1.扇形
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--引入vue--%>
<%--引入vue文件:必須先引入vue--%>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<%--引入axios文件--%>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" rel="external nofollow" rel="external nofollow" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/js/qs.min.js"></script>
<script src="/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
<div id="pieBox" style="width: 600px; height: 400px;"></div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
},
created() {
this.showPie()
},
methods: {
showPie() {
// console.log(111)
axios.get("/count/lis").then(msg => {
//店鋪
console.log(msg.data.data)
var pieData = msg.data.data;
var myChart = new echarts.init(document.getElementById('pieBox'));
myChart.setOption({
title: {
text: '用戶商家統(tǒng)計(jì)對比',
subtext: '數(shù)量比例',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '投票數(shù)',
type: 'pie',
radius: '50%',
data: pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
});
}
}
})
</script>
</body>
</html>后端步驟：
首先定義一個(gè)vo類，扇形圖需要的參數(shù)--當(dāng)作返回（泛型）類型
1.mapper、mapper.xml--求出店鋪的總數(shù)量、用戶的總數(shù)量
2.在impl業(yè)務(wù)實(shí)現(xiàn)層處理業(yè)務(wù)
3.最后在控制層調(diào)用接口層方法
2.折線圖
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--引入vue文件:必須先引入vue--%>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<%--引入axios文件--%>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" rel="external nofollow" rel="external nofollow" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/js/qs.min.js"></script>
<script src="/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
<div id="zhuBox" style="width: 800px; height: 400px;"></div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
},
created() {
this.showZhu()
},
methods: {
//圖
showZhu(){
axios.get("/count/th").then(msg=>{
var zhuData=msg.data.data;
var myChart = echarts.init(document.getElementById('zhuBox'));
myChart.setOption({
title: {
text: '店鋪收入數(shù)量'
},
tooltip: {},
legend: {},
xAxis: {
data: zhuData.xdata
},
yAxis: {},
series: [
{
name: '數(shù)量',
type: 'bar',
data: zhuData.ydata
}
]
});
});
},
}
})
</script>
</body>
</html>zhuData類
1.mapper、mapper.xml
2.impl實(shí)現(xiàn)業(yè)務(wù)層
3.控制層
總結(jié)
到此這篇關(guān)于eCharts圖表實(shí)現(xiàn)扇形和折線的文章就介紹到這了,更多相關(guān)eCharts圖表扇形和折線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn)
JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
解決微信小程序調(diào)用moveToLocation失效問題【超簡單】
Code Review 方法論與實(shí)踐總結(jié)梳理
微信小程序開發(fā)實(shí)現(xiàn)的IP地址查詢功能示例
通過JS動態(tài)創(chuàng)建一個(gè)html DOM元素并顯示
微信分享的標(biāo)題、縮略圖、連接及描述設(shè)置方法