1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
| <template>
<div> <!-- el-col:--> <!-- el-col是element-ui中的栅格布局组件,用于将页面分割成24列,通过控制el-col的span属性来控制元素占据的列数--> <!-- 例如:el-col :span="12"表示元素占据12列,占据一半的宽度--> <el-row> <el-col :span="12"> <div id="main" style="width: 600px;height:600px;"></div> </el-col> <el-col :span="12"> <div id="pie" style="width: 600px;height:600px;"></div> </el-col> </el-row> </div> </template>
<script> import * as echarts from 'echarts'; export default { name: "Home", data(){ return{
} }, mounted() { //页面元素渲染之后再触发 //折线图 const chartDom = document.getElementById('main'); const myChart = echarts.init(chartDom); let option; option = { title:{ text:'会员统计', subtext:'各季度会员统计', left:'center', }, xAxis: { type: 'category', data: ['第一季度', '第二季度', '第三季度', '第四季度'] }, yAxis: { type: 'value' }, series: [ { data: [], type: 'line' }, { data: [], type: 'bar' } ] };
//饼图 const pieDom = document.getElementById('pie'); const pieChar = echarts.init(pieDom); let peiOption = { title:{ text:'会员统计', subtext:'比例图', left:'center', }, legend: { top: 'bottom' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [] } ] };
//异步请求数据 this.request.get("/echarts/members").then(res=>{ console.log(res) option.series[0].data = res.data option.series[1].data = res.data // 数据更新后,需要刷新图表 myChart.setOption(option);
peiOption.series[0].data = [ {name:'第一季度' ,value:res.data[0]}, {name:'第二季度' ,value:res.data[1]}, {name:'第三季度' ,value:res.data[2]}, {name:'第四季度' ,value:res.data[3]}, ] pieChar.setOption(peiOption); }) } } </script>
<style scoped>
</style>
|