网站建设公司-好发信息网,请私人做网站风险,公司网站介绍范文,微信 网站应用开发1.把echarts 在 methods 封装成一个方法mounted 在中调用
折线图 和柱状图
mounted调用下边两个方法 mounted(){//最早获取DOM元素的生命周期函数 挂载完毕console.log(mounted-id , document.getElementById(charts))this.line()this.pie()},methods里边的方法
line() {// …1.把echarts 在 methods 封装成一个方法mounted 在中调用
折线图 和柱状图
mounted调用下边两个方法 mounted(){//最早获取DOM元素的生命周期函数 挂载完毕console.log(mounted-id , document.getElementById(charts))this.line()this.pie()},methods里边的方法
line() {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(charts));// 绘制图表myChart.setOption({tooltip: {//提示框组件trigger: axis,},legend: {},toolbox: {feature: {// dataZoom: {// yAxisIndex: none// },// restore: {},saveAsImage: {}}},xAxis: {//x轴数据data: [120, 200, 150, 80, 70, 110, 130],},yAxis: {//y轴会自动创建数据},series: [//图表内容{name: 销售额,type: line,data: [120, 200, 150, 80, 70, 110, 130],,smooth: true,//是否平滑曲线显示},{name: 销售量,type: bar,data: [120, 200, 150, 80, 70, 110, 130],}]});},饼图 pie(){let myChart echarts.init(document.getElementById(pie));myChart.setOption({tooltip: {trigger: item},legend: {top: 5%,left: center},series: [{name: Access From,type: pie,radius: [40%, 70%],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: #fff,borderWidth: 2},label: {show: false,position: center},emphasis: {label: {show: true,fontSize: 40,fontWeight: bold}},labelLine: {show: false},data: [{ value: 1048, name: Search Engine },{ value: 735, name: Direct },{ value: 580, name: Email },{ value: 484, name: Union Ads },{ value: 300, name: Video Ads }]}]});},注意的地方:created调用location事件时获取dom对象是不行的因为在created钩子函数中是获取不到dom的我们可以使用mounted钩子替换成created钩子
从后端取数据
发现后端给我们返回的不是echarts的格式 这个时候我们做一个操作 下一步操作 遍历内容 数据格式转换
最后一步 在echarts柱状图或者折线图里边去显示这些数据 methods:{// -----获取图标动态数据async format(){let res await this.$api.format()console.log(获取图标动态数据---,res.data);console.log(res.data.result.data.sale_money);//[{}{}]// 折线图 柱状图数据格式:[xx,xx,xx]// 获取x轴的数据名称let arr res.data.result.data.sale_money;//拿到数据let arrx []let total []let money []arr.forEach((ele){//ele是取每一项arrx.push(ele.name)total.push(ele.num)money.push(ele.total_amount)})console.log(arrx);console.log(total);console.log(money);this.line(arrx,money,total)},//绘制图表--折线------------------line(arrx,money,total) {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(charts));// 绘制图表myChart.setOption({tooltip: {//提示框组件trigger: axis,},legend: {},toolbox: {feature: {// dataZoom: {// yAxisIndex: none// },// restore: {},saveAsImage: {}}},xAxis: {//x轴数据data:arrx,},yAxis: {//y轴会自动创建数据},series: [//图表内容{name: 销售额,type: line,data:money,smooth: true,//是否平滑曲线显示},{name: 销售量,type: bar,data: total,}]});},},饼状图取数据 发现 数据循环遍历数据格式转换 let pieData []arr.forEach((ele){//ele是取每一项//饼图--对象数据let obj{}obj.name ele.name;obj.value ele.total_amount;pieData.push(obj)//[{name:,value:},{},{}]})console.log(饼图,pieData);饼图最后一步 在echarts柱状图或者折线图里边去显示这些数据 //绘制饼图pie(pieData) {var myChart echarts.init(document.getElementById(pie));var option;option {tooltip: {trigger: item,formatter:{a}br/{b}:{d}%},legend: {orient: vertical,left: left},series: [{name: 产品销售额,type: pie,radius: 50%,data:pieData,// data: [//[{},{}]// { value: 1048, name: 审议 },// { value: 735, name: 淘宝 },// { value: 580, name: 京东 }// ],emphasis: {//高亮配置itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};option myChart.setOption(option);},全部代码
templatediv classhome!--1. 顶部区域布局---------- --div classheaderdiv classitem总销售额div classnum{{ totalData.saleTotal | num}}/divdiv classbottom今日销售额:{{totalData.sale | num}}/div/divdiv classitem总访问量div classnum{{ totalData.viewsTotal | num}}/divdiv classbottom今日访问量:{{totalData.views | num}}/div/divdiv classitem总收藏量div classnum{{ totalData.collectTotal | num }}/divdiv classbottom今日销售额:{{ totalData.collectTotal | num}}/div/divdiv classitem总支付量div classnum{{totalData.payTotal | num }}/divdiv classbottom今日支付量:{{ totalData.pay | num}}/div/div/div!--2. 访问数据统计 -----------------div classcontentdiv classtime-info idbox13div classtitle月销售额/divdiv idcharts stylewidth: 100%; height: 300px/div/divdiv classarea idbox1div classtitle产品销售比例/divdiv idpie stylewidth: 100%; height: 300px/div/div/div!-- 3. --!-- 最新内容 --div classhome-footerel-card classbox-carddiv slotheader classclearfixspan今日订单/span/divdiv classtext itemel-rowel-col :span8div classtitle今日订单数/divdiv{{ orderData.curOrderCount }}/div/el-colel-col :span8div classtitle汇总确认订单/divdiv{{ orderData.curCollect }}/div/el-colel-col :span8div classtitle今日金额/divdiv{{ orderData.curMoney }}/div/el-col/el-row/div/el-cardel-card classbox-carddiv slotheader classclearfixspan本月订单/span/divdiv classtext itemel-rowel-col :span8div classtitle本月订单数/divdiv{{ orderData.orderCount }}/div/el-colel-col :span8div classtitle汇总确认订单/divdiv{{ orderData.collect }}/div/el-colel-col :span8div classtitle本月金额/divdiv{{ orderData.money }}/div/el-col/el-row/div/el-cardel-card classbox-carddiv slotheader classclearfixspan快捷入口/span/divdiv classtext itemel-button typeprimary产品管理/el-buttonel-button消息管理/el-buttonel-button内容管理/el-button/div/el-card/div/div
/templatescript
import * as echarts from echarts;
export default {data(){return{totalData:{},//数据统计orderData:{},//订单数据}},created(){this.totalInfo();//打开页面就要加载this.orderinfo();//this.format();},mounted(){//最早获取DOM元素的生命周期函数 挂载完毕console.log(mounted-id , document.getElementById(charts))// this.line()// this.pie()},methods:{// ------获取首页统计数据async totalInfo(){let res await this.$api.totalInfo();console.log(首页统计信息---,res.data);this.totalData res.data.data.list;// console.log( res.data.data.list);},// ----获取今日订单数据async orderinfo(){let res await this.$api.orderinfo()console.log(首页统计信息---,res.data);this.orderData res.data.list},// -----获取图标动态数据async format(){let res await this.$api.format()console.log(获取图标动态数据---,res.data);console.log(res.data.result.data.sale_money);//[{}{}]// 折线图 柱状图数据格式:[xx,xx,xx]// 获取x轴的数据名称let arr res.data.result.data.sale_money;//拿到数据let arrx []let total []let money []let pieData []arr.forEach((ele){//ele是取每一项arrx.push(ele.name)total.push(ele.num)money.push(ele.total_amount)//饼图--对象数据let obj{}obj.name ele.name;obj.value ele.total_amount;pieData.push(obj)//[{name:,value:},{},{}]})console.log(arrx);console.log(total);console.log(money);this.line(arrx,money,total)this.pie(pieData)console.log(饼图,pieData);},//绘制图表--折线------------------line(arrx,money,total) {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(charts));// 绘制图表myChart.setOption({tooltip: {//提示框组件trigger: axis,},legend: {},toolbox: {feature: {// dataZoom: {// yAxisIndex: none// },// restore: {},saveAsImage: {}}},xAxis: {//x轴数据data:arrx,},yAxis: {//y轴会自动创建数据},series: [//图表内容{name: 销售额,type: line,data:money,smooth: true,//是否平滑曲线显示},{name: 销售量,type: bar,data: total,}]});},//绘制饼图pie(pieData) {var myChart echarts.init(document.getElementById(pie));var option;option {tooltip: {trigger: item,formatter:{a}br/{b}:{d}%},legend: {orient: vertical,left: left},series: [{name: 产品销售额,type: pie,radius: 50%,data:pieData,// data: [//[{},{}]// { value: 1048, name: 审议 },// { value: 735, name: 淘宝 },// { value: 580, name: 京东 }// ],emphasis: {//高亮配置itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};option myChart.setOption(option);},},// 使用过滤器----处理数据格式filters:{num(value){if(!value) return;return value.toLocaleString();}}}
/scriptstyle langless scoped
.home {margin: 10px;
}
.header {display: flex;padding-right: 30px;.item {flex: 1;height: 100px;padding: 10px;background: #fff;border-radius: 10px;margin-left: 20px;margin-right: 20px;font-weight: bold;color: #fff;// text-align: center;position: relative;.num {font-size: 22px;margin: 10px;color: #fff;}.bottom {position: absolute;border-top: 1px solid rgb(246, 245, 245);padding: 10px 20px;bottom: 0;right: 0;left: 0;color: #fff;font-weight: normal;}}.item:nth-child(1) {background-image: linear-gradient(#df887d, #88554d);}.item:nth-child(2) {background-image: linear-gradient(#409eff, #2e556e);}.item:nth-child(3) {background-image: linear-gradient(#b54fa8, #713c7a);}.item:nth-child(4) {background-image: linear-gradient(#1cd2f1, #39717a);}
}
/deep/.el-card__body{// border: 1px solid red;text-align: center;line-height: 30px;
}
// 图表.content {margin: 20px;display: flex;height: 320px;.time-info {flex: 2;background: #fff;margin-right: 20px;padding: 10px;}.area {flex: 1;background: #fff;padding: 10px;}
}//内容.home-footer {display: flex;padding-left: 20px;margin-bottom: 20px;.box-card {flex: 1;margin-right: 30px;span {font-weight: 600;}}
}/style
