uni-app：实现页面效果4（echarts数据可视化）-编程知识

效果

代码

<template><view><view><view class="title">概况</view><view class="line_position"><view class="line1"><view class="item"><view class="one">今日销售额(万元)</view><view class="two"><view class="left">{{line1_info.daysale_allamount}}</view><view class="right">{{line1_info.daychangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.daychangeRate)" alt=""></image></view></view><view class="item"><view class="one">本周销售额(万元)</view><view class="two"><view class="left">{{line1_info.weeksale_allamount}}</view><view class="right">{{line1_info.weekchangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.weekchangeRate)" alt=""></image></view></view><view class="item"><view class="one">本月销售额(万元)</view><view class="two"><view class="left">{{line1_info.monthsale_allamount}}</view><view class="right">{{line1_info.monthchangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.monthchangeRate)" alt=""></image></view></view><view class="item"><view class="one">今年销售额(万元)</view><view class="two"><view class="left">{{line1_info.yearsale_allamount}}</view><view class="right">{{line1_info.yearchangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.yearchangeRate)" alt=""></image></view></view></view></view></view><view><view class="title">销售额统计</view><view class="tab_position"><view class="tab-bar"><text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">周统计</text><text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">月统计</text><text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">年统计</text></view></view><view v-show="activeTab === '0'"><view class="out"><view id="myChart"></view></view></view><view v-show="activeTab === '1'"><view class="out"><view id="myChart1"></view></view></view><view v-show="activeTab === '2'"><view class="out"><view id="myChart2"></view></view></view></view></view>
</template>
<script>// import echarts from '@/static/js/echarts.js' // 引入文件import * as echarts from 'echarts';export default {data() {return {line1_info: '',down: getApp().globalData.icon + 'report/down.png',up: getApp().globalData.icon + 'report/up.png',line: getApp().globalData.icon + 'report/line.png',activeTab: '0', //默认分页面weekinfo: [], // 定义一个空数组用于存储周统计数据monthinfo: [], // 定义一个空数组用于存储月统计数据}},methods: {//切换分页面changeTab(index) {this.activeTab = index;},//图片展示getImagePath(rate) {if (rate === "无法计算") {return this.line;} else if (rate && rate.startsWith("-")) {return this.down;} else {return this.up;}},getdata() {uni.request({url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',data: {},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {//行1：年月日总额统计this.line1_info = res.data;//行2：周统计var weekinfo = res.data.week_info;this.weekinfo = weekinfo;//行2：月统计var monthinfo = res.data.month_info;this.monthinfo = monthinfo;//行2：年统计var yearinfo = res.data.year_info;this.yearinfo = yearinfo;console.log(this.yearinfo)//显示图表this.echart();},fail(res) {console.log("查询失败")}});},//绘制图标echart() {// 周统计金额const myChart = echarts.init(document.getElementById('myChart'))// 提取日期和对应的值var dates = this.weekinfo.date;var values = this.weekinfo.total_amount;var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];// 进行图表的配置和数据处理myChart.setOption({//配置网格组件，用于定义图表的位置和大小grid: {top: '15%', // 增加top的值来创建间距left: '2%',right: '2%',bottom: '2%', // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},color: ['#e57b7b'],tooltip: {trigger: 'item',axisPointer: {type: 'line'},formatter: function(params) {var value = values[params.dataIndex];var date = dates[params.dataIndex];var week = weeks[params.dataIndex];var marker = params.marker; // 添加marker(小圆点)return marker + ' ' + date + '<br/>' + week + ' : ' + value + '万元';}},xAxis: {// name: '日期',data: weeks,axisLine: {show: false // 隐藏纵坐标轴的横线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},yAxis: {name: '金额(万元)',splitLine: {show: false // 隐藏纵坐标轴的背景横线},axisLine: {show: false // 隐藏纵坐标轴的竖线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},axisLabel: {fontSize: 12 // 设置横轴标签字体大小为12},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},series: [{barWidth: '8',name: '销量',type: 'bar',data: values,itemStyle: {show: true,position: 'top',textStyle: {// color: '#515dc3',fontSize: 12}}}]});//月统计// 周统计金额const myChart1 = echarts.init(document.getElementById('myChart1'))// 提取日期和对应的值var dates1 = this.monthinfo.date;var values1 = this.monthinfo.total_amount;var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];// 进行图表的配置和数据处理myChart1.setOption({//配置网格组件，用于定义图表的位置和大小grid: {top: '15%', // 增加top的值来创建间距left: '2%',right: '2%',bottom: '2%', // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},color: ['#5588d4'],tooltip: {trigger: 'item',axisPointer: {type: 'line'},formatter: function(params) {var value = values1[params.dataIndex];var date = dates1[params.dataIndex];var month = months1_chinese[params.dataIndex];var marker = params.marker; // 添加marker(小圆点)return marker + ' ' + date + '<br/>' + month + ' : ' + value + '万元';}},xAxis: {// name: '日期',data: months1,axisLine: {show: false // 隐藏纵坐标轴的横线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},yAxis: {name: '金额(万元)',splitLine: {show: false // 隐藏纵坐标轴的背景横线},axisLine: {show: false // 隐藏纵坐标轴的竖线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},axisLabel: {fontSize: 12 // 设置横轴标签字体大小为12},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},series: [{barWidth: '6',name: '销量',type: 'bar',data: values1,itemStyle: {show: true,position: 'top',textStyle: {// color: '#515dc3',fontSize: 12}}}]});//近五年年统计// 年统计金额const myChart2 = echarts.init(document.getElementById('myChart2'))// 提取日期和对应的值var dates2 = this.yearinfo.date;var values2 = this.yearinfo.total_amount;// 进行图表的配置和数据处理myChart2.setOption({//配置网格组件，用于定义图表的位置和大小grid: {top: '15%', // 增加top的值来创建间距left: '2%',right: '2%',bottom: '2%', // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},color: ['#71aa77'],tooltip: {trigger: 'item',axisPointer: {type: 'line'},formatter: function(params) {var value = values2[params.dataIndex];var date = dates2[params.dataIndex];var marker = params.marker; // 添加marker(小圆点)return marker + ' ' + date + '年' + '<br/>' + value + '万元';}},xAxis: {// name: '日期',data: dates2,axisLine: {show: false // 隐藏纵坐标轴的横线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},yAxis: {name: '金额(万元)',splitLine: {show: false // 隐藏纵坐标轴的背景横线},axisLine: {show: false // 隐藏纵坐标轴的竖线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},axisLabel: {fontSize: 12 // 设置横轴标签字体大小为12},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},series: [{barWidth: '8',name: '销量',type: 'bar',data: values2,itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {// color: '#515dc3',fontSize: 12}}}}}]})},},onLoad() {this.getdata();},}
</script>
<style lang="scss">//第一行内容.title {// border:1px solid black;padding-left: 2%;font-size: 105%;}.line_position {overflow-x: scroll;scroll-behavior: smooth; // 设置滚动平滑过渡//隐藏滚动条&::-webkit-scrollbar {width: 0; // 隐藏默认的滚动条 height: 0;}&::-webkit-scrollbar-thumb {background-color: transparent; // 隐藏滚动条拖拽的小方块}.line1 {width: 400%;display: flex;// border:1px solid red;.item:nth-child(1) {background-color: #515dc3;}.item:nth-child(2) {background-color: #ff9a3e;}.item:nth-child(3) {background-color: #38bf80;}.item:nth-child(4) {background-color: #fc5959;}.item {width: 40%;margin: 1% 2%;border-radius: 5px;padding: 1% 1% 0 1%;// border:1px solid red;color: white;.two {display: flex;margin: 5% 0;align-items: center;// border:1px solid red;.left {width: 70%;font-size: 24px;// border:1px solid red;}.right {text-align: right;width: 30%;// border:1px solid red;}}.three {text-align: center;// border:1px solid red;image {width: 60px;height: 50px;}}}}}//第二行内容.tab_position {width: 100%;display: flex;justify-content: center;}.tab-bar {display: flex;justify-content: space-between;width: 90%;// border: 1px solid black;background-color: #f2f2f2;border-radius: 15px;margin: 3% 1%;}.tab {padding: 5px;font-size: 16px;cursor: pointer;// border: 1px solid black;width: 33%;text-align: center;// border-bottom: 1px solid #ccc;}.active {color: white;background-color: #515dc3;border-radius: 15px;/* background-color:#74bfe7; */// border-bottom: 1px solid #74bfe7;}//图标.out {width: 800rpx;// border:1px solid red;display: flex;justify-content: center;}#myChart {width: 700rpx;height: 600rpx;}#myChart1 {width: 700rpx;height: 600rpx;}#myChart2 {width: 700rpx;height: 600rpx;}
</style>

这样写会发现在手机端无法正常运

现改用renderjs进行重写

后端代码

 //查询销售看板需要使用的数据public function select_sale_ekanbaninfo(){$yesterday = strtotime('-1 day', strtotime(date('Y-m-d')));//获得昨天的时间戳$today = strtotime(date('Y-m-d')); // 获取当前日期的时间戳$data['today'] = $today;// 获取本周开始和结束时间戳$thisWeekStart = strtotime('this week', $today);$thisWeekEnd = strtotime('next week', $today) - 1;// 获取上一周开始和结束时间戳$lastWeekStart = strtotime('-1 week', $thisWeekStart);$lastWeekEnd = strtotime('-1 week', $thisWeekEnd);// 获取本月的开始和结束时间戳$thisMonthStart = strtotime('first day of this month', $today);$thisMonthEnd = strtotime('last day of this month', $today);// 获取上一个月的开始和结束时间戳$lastMonthStart = strtotime('first day of last month', $today);$lastMonthEnd = strtotime('last day of last month', $today);// 获取今年的开始和结束时间戳$thisYearStart = strtotime('first day of January', $today);$thisYearEnd = strtotime('last day of December', $today);// 获取去年的开始和结束时间戳$lastYearStart = strtotime('-1 year', $thisYearStart);$lastYearEnd = strtotime('-1 year', $thisYearEnd);// $oneMonthAgo = strtotime('-1 month'); // 获取一个月前的时间戳// $oneYearAgo = strtotime('-1 year'); // 获取一年前的时间戳// 获取昨天的总金额$data['yesterday_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $yesterday)->where('creation_date', '<', $today)->sum('order_all_amount');//当天的总金额$data['daysale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $today) // 筛选 creation_date 大于等于今天的记录->sum('order_all_amount'); // 求和 order_all_amount 列的值// 计算日涨幅比率if ($data['yesterday_allamount'] == 0) {$data['weekchangeRate'] = '无法计算'; }else{$data['daychangeRate'] = ($data['daysale_allamount'] - $data['yesterday_allamount']) / $data['yesterday_allamount'] * 100;if ($data['daychangeRate'] >= 0) {$data['daychangeRate'] = '+' . number_format($data['daychangeRate'], 2) . '%';} else {$data['daychangeRate'] = number_format($data['daychangeRate'], 2) . '%';}}$data['daysale_allamount'] = number_format($data['daysale_allamount']/10000.0, 2); // 格式化结果保留两位小数//近一周的总金额// 获取本周的总金额$data['weeksale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $thisWeekStart)->where('creation_date', '<=', $thisWeekEnd)->sum('order_all_amount');// 获取上一周的总金额$data['lastweeksale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $lastWeekStart)->where('creation_date', '<=', $lastWeekEnd)->sum('order_all_amount');// 计算周涨幅比率if ($data['lastweeksale_allamount'] == 0) {$data['weekchangeRate'] = '无法计算';} else {$data['weekchangeRate'] = ($data['weeksale_allamount'] - $data['lastweeksale_allamount']) / $data['lastweeksale_allamount'] * 100;if ($data['weekchangeRate'] >= 0) {$data['weekchangeRate'] = '+' . number_format($data['weekchangeRate'], 2) . '%';} else {$data['weekchangeRate'] = number_format($data['weekchangeRate'], 2) . '%';}// $data['weekchangeRate'] = number_format(($data['weeksale_allamount'] - $data['lastweeksale_allamount']) / $data['lastweeksale_allamount'] * 100, 2) . '%';}$data['weeksale_allamount'] = number_format($data['weeksale_allamount']/10000.0, 2);// 获取本月的总金额$data['monthsale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $thisMonthStart)->where('creation_date', '<=', $thisMonthEnd)->sum('order_all_amount');// 获取上一个月的总金额$data['lastmonthsale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $lastMonthStart)->where('creation_date', '<=', $lastMonthEnd)->sum('order_all_amount');// 计算月涨幅比率if ($data['lastmonthsale_allamount'] == 0) {$data['monthchangeRate'] = '无法计算';} else {$data['monthchangeRate'] = ($data['monthsale_allamount'] - $data['lastmonthsale_allamount']) / $data['lastmonthsale_allamount'] * 100;if ($data['monthchangeRate'] >= 0) {$data['monthchangeRate'] = '+' . number_format($data['monthchangeRate'], 2) . '%';} else {$data['monthchangeRate'] = number_format($data['monthchangeRate'], 2) . '%';}// $data['monthchangeRate'] = number_format(($data['monthsale_allamount'] - $data['lastmonthsale_allamount']) / $data['lastmonthsale_allamount'] * 100, 2) . '%';}$data['monthsale_allamount'] = number_format($data['monthsale_allamount']/10000.0, 2);// 获取今年的总金额$data['yearsale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $thisYearStart)->where('creation_date', '<=', $thisYearEnd)->sum('order_all_amount');// 获取去年的总金额$data['lastyearsale_allamount'] = Db::table('so_headers_all')->where('creation_date', '>=', $lastYearStart)->where('creation_date', '<=', $lastYearEnd)->sum('order_all_amount');// 计算年涨幅if ($data['lastyearsale_allamount'] == 0) {$data['yearchangeRate'] = '无法计算';} else {$data['yearchangeRate'] = ($data['yearsale_allamount'] - $data['lastyearsale_allamount']) / $data['lastyearsale_allamount'] * 100;if ($data['yearchangeRate'] >= 0) {$data['yearchangeRate'] = '+' . number_format($data['yearchangeRate'], 2) . '%';} else {$data['yearchangeRate'] = number_format($data['yearchangeRate'], 2) . '%';}// $data['yearchangeRate'] = number_format(($data['yearsale_allamount'] - $data['lastyearsale_allamount']) / $data['lastyearsale_allamount'] * 100, 2) . '%';}$data['yearsale_allamount'] = number_format($data['yearsale_allamount']/10000.0, 2);//查询本周每天的的总金额数//获取本周的起始日期和结束日期$weekStart = date('Y-m-d', strtotime('this week Monday'));$weekEnd = date('Y-m-d', strtotime('this week Sunday'));// 构造日期范围数组（从周一到周天）$dateRange = [];$currentDate = $weekStart;while ($currentDate <= $weekEnd) {$dateRange[] = $currentDate;$currentDate = date('Y-m-d', strtotime($currentDate . ' +1 day'));}// 查询每天的总金额数$result = Db::table('so_headers_all')->field("DATE_FORMAT(FROM_UNIXTIME(creation_date), '%Y-%m-%d') AS date, IFNULL(SUM(order_all_amount), 0) AS total_amount")->whereTime('creation_date', '>=', $weekStart)->whereTime('creation_date', '<=', $weekEnd)->group('date')->select();//去掉逗号，转换为foreach ($result as &$item) {$item['total_amount'] = round(($item['total_amount'] / 10000),2);}// 构造最终结果数组$dateArray = [];$totalAmountArray = [];foreach ($dateRange as $date) {$found = false;foreach ($result as $row) {if ($row['date'] == $date) {$dateArray[] = $row['date'];$totalAmountArray[] = $row['total_amount'];$found = true;break;}}if (!$found) {$weekdayIndex = date('w', strtotime($date));$dateArray[] = $date;$totalAmountArray[] = 0;}}$data['week_info']['date'] = $dateArray;$data['week_info']['total_amount'] = $totalAmountArray;//查询今年中每月的总金额数据// 获取当前年份$year = date('Y');$result1 = Db::table('so_headers_all')->field("DATE_FORMAT(FROM_UNIXTIME(creation_date), '%Y-%m') AS month, IFNULL(SUM(order_all_amount), 0) AS total_amount")->whereTime('creation_date', '>=', strtotime($year . '-01-01'))->whereTime('creation_date', '<=', strtotime($year . '-12-31'))->group('month')->select();//去掉逗号，转换为foreach ($result1 as &$item) {$item['total_amount'] = round(($item['total_amount'] / 10000),2);}// 构造最终结果数组$dateArray1 = [];$totalAmountArray1 = [];for ($i = 1; $i <= 12; $i++) {//str_pad 函数用于在字符串的左侧（或右侧）填充指定字符，达到指定长度。这里，使用 str_pad 函数在 $i 左侧填充字符 '0'，直到 $i 的长度达到 2。$month = str_pad($i, 2, '0', STR_PAD_LEFT);$dateArray1[] = $year . '-' . $month;$totalAmountArray1[$year . '-' . $month] = 0;}// 将查询结果填充到对应的月份位置foreach ($result1 as $item) {$totalAmountArray1[$item['month']] = $item['total_amount'];}// 最终结果数组foreach ($dateArray1 as $date) {$finalResult[] = ['date' => $date,'total_amount' => $totalAmountArray1[$date]];$data['month_info']['date'][] = $date;$data['month_info']['total_amount'][] = $totalAmountArray1[$date];}//查询近五年总金额数据// 获取当前年份$currentYear = date('Y');// 构造最终结果数组$data['year_info']['date'] = [];$data['year_info']['total_amount'] = [];for ($i = $currentYear - 5; $i <= $currentYear; $i++) {$year = (string) $i;$result = Db::table('so_headers_all')->field("IFNULL(SUM(order_all_amount), 0) AS total_amount")->whereTime('creation_date', '>=', strtotime($year . '-01-01'))->whereTime('creation_date', '<=', strtotime($year . '-12-31'))->find();$totalAmount = round(($result['total_amount'] / 10000), 2);$data['year_info']['date'][] = $year;$data['year_info']['total_amount'][] = $totalAmount;}echo json_encode($data);}

重写代码

<template><view><view><view class="title">概况</view><view class="line_position"><view class="line1"><view class="item"><view class="one">今日销售额(万元)</view><view class="two"><view class="left">{{line1_info.daysale_allamount}}</view><view class="right">{{line1_info.daychangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.daychangeRate)" alt=""></image></view></view><view class="item"><view class="one">本周销售额(万元)</view><view class="two"><view class="left">{{line1_info.weeksale_allamount}}</view><view class="right">{{line1_info.weekchangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.weekchangeRate)" alt=""></image></view></view><view class="item"><view class="one">本月销售额(万元)</view><view class="two"><view class="left">{{line1_info.monthsale_allamount}}</view><view class="right">{{line1_info.monthchangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.monthchangeRate)" alt=""></image></view></view><view class="item"><view class="one">今年销售额(万元)</view><view class="two"><view class="left">{{line1_info.yearsale_allamount}}</view><view class="right">{{line1_info.yearchangeRate}}</view></view><view class="three"><image :src="getImagePath(line1_info.yearchangeRate)" alt=""></image></view></view></view></view></view><view><view class="title">销售额统计</view><view class="tab_position"><view class="tab-bar"><text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">周统计</text><text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">月统计</text><text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">年统计</text></view></view><view v-show="activeTab === '0'"><view class="out"><view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view></view></view><view v-show="activeTab === '1'"><view class="out"><view :prop="option1" :change:prop="echarts.updateEcharts1" id="echarts1" class="echarts"></view></view></view><view v-show="activeTab === '2'"><view class="out"><view :prop="option2" :change:prop="echarts.updateEcharts2" id="echarts2" class="echarts"></view></view></view></view></view>
</template>
<script>// import echarts from '@/static/js/echarts.js' // 引入文件import * as echarts from 'echarts';export default {data() {return {line1_info: '',down: getApp().globalData.icon + 'report/down.png',up: getApp().globalData.icon + 'report/up.png',line: getApp().globalData.icon + 'report/line.png',activeTab: '0', //默认分页面weekinfo: [], // 定义一个空数组用于存储周统计数据monthinfo: [], // 定义一个空数组用于存储月统计数据yearinfo: [], // 定义一个空数组用于存储年统计数据option: '',option1: '',option2: '',}},mounted() {this.getData(); // 在组件挂载后调用获取数据的方法},methods: {//切换分页面changeTab(index) {this.activeTab = index;},//图片展示getImagePath(rate) {if (rate === "无法计算") {return this.line;} else if (rate && rate.startsWith("-")) {return this.down;} else {return this.up;}},getData() {uni.request({url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',data: {},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {//行1：年月日总额统计this.line1_info = res.data;//行2：周统计var weekinfo = res.data.week_info;this.weekinfo = weekinfo;//行2：月统计var monthinfo = res.data.month_info;this.monthinfo = monthinfo;//行2：年统计var yearinfo = res.data.year_info;this.yearinfo = yearinfo;// console.log(this.yearinfo)//显示图表this.echart();},fail(res) {console.log("查询失败")}});},//绘制图标echart() {// 周统计金额// 提取日期和对应的值var dates = this.weekinfo.date;var values = this.weekinfo.total_amount;var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];// 进行图表的配置和数据处理this.option = {//配置网格组件，用于定义图表的位置和大小grid: {top: '15%', // 增加top的值来创建间距left: '2%',right: '2%',bottom: '2%', // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},color: ['#e57b7b'],tooltip: {trigger: 'item',axisPointer: {type: 'line'},formatter: function(params) {var value = values[params.dataIndex];var date = dates[params.dataIndex];var week = weeks[params.dataIndex];var marker = params.marker; // 添加marker(小圆点)return marker + ' ' + date + '<br/>' + week + ' : ' + value + '万元';}},xAxis: {// name: '日期',data: weeks,axisLine: {show: false // 隐藏纵坐标轴的横线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},yAxis: {name: '金额(万元)',splitLine: {show: false // 隐藏纵坐标轴的背景横线},axisLine: {show: false // 隐藏纵坐标轴的竖线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},axisLabel: {fontSize: 12 // 设置横轴标签字体大小为12},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},series: [{barWidth: '8',name: '销量',type: 'bar',data: values,itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {// color: '#515dc3',fontSize: 12}}}}}]};//月统计// 月统计金额// 提取日期和对应的值var dates1 = this.monthinfo.date;var values1 = this.monthinfo.total_amount;var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];// 进行图表的配置和数据处理this.option1 = {//配置网格组件，用于定义图表的位置和大小grid: {top: '15%', // 增加top的值来创建间距left: '2%',right: '2%',bottom: '2%', // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},color: ['#5588d4'],tooltip: {trigger: 'item',axisPointer: {type: 'line'},formatter: function(params) {var value = values1[params.dataIndex];var date = dates1[params.dataIndex];var month = months1_chinese[params.dataIndex];var marker = params.marker; // 添加marker(小圆点)return marker + ' ' + date + '<br/>' + month + ' : ' + value + '万元';}},xAxis: {// name: '日期',data: months1,axisLine: {show: false // 隐藏纵坐标轴的横线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},yAxis: {name: '金额(万元)',splitLine: {show: false // 隐藏纵坐标轴的背景横线},axisLine: {show: false // 隐藏纵坐标轴的竖线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},axisLabel: {fontSize: 12 // 设置横轴标签字体大小为12},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},series: [{barWidth: '6',name: '销量',type: 'bar',data: values1,itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {// color: '#515dc3',fontSize: 12}}}}}]};//近五年年统计// 年统计金额// 提取日期和对应的值var dates2 = this.yearinfo.date;var values2 = this.yearinfo.total_amount;// 进行图表的配置和数据处理this.option2 = {//配置网格组件，用于定义图表的位置和大小grid: {top: '15%', // 增加top的值来创建间距left: '2%',right: '2%',bottom: '2%', // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},color: ['#71aa77'],tooltip: {trigger: 'item',axisPointer: {type: 'line'},formatter: function(params) {var value = values2[params.dataIndex];var date = dates2[params.dataIndex];var marker = params.marker; // 添加marker(小圆点)return marker + ' ' + date + '年' + '<br/>' + value + '万元';}},xAxis: {// name: '日期',data: dates2,axisLine: {show: false // 隐藏纵坐标轴的横线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},yAxis: {name: '金额(万元)',splitLine: {show: false // 隐藏纵坐标轴的背景横线},axisLine: {show: false // 隐藏纵坐标轴的竖线},//隐藏小刻度短线axisTick: { // x轴刻度相关配置show: false, // 是否显示x轴刻度线},axisLabel: {fontSize: 12 // 设置横轴标签字体大小为12},nameTextStyle: {fontSize: 12 // 设置横轴名称字体大小为12}},series: [{barWidth: '8',name: '销量',type: 'bar',data: values2,itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {// color: '#515dc3',fontSize: 12}}}}}]}},},}
</script>
<!-- 指定脚本类型模块为echarts,语言为renderjs -->
<script module="echarts" lang="renderjs">let myChartlet myChart1let myChart2export default {mounted() {// 首先判断window.echarts是否存在，如果存在则调用initEcharts1方法进行初始化。if (typeof window.echarts === 'function') {this.initEcharts()this.initEcharts1()this.initEcharts2()} else {// 如果不存在，则动态创建一个<script>标签，并设置其src属性为static/js/echarts.js，然后在加载完成后调用initEcharts方法。// 动态引入较大类库避免影响页面展示const script = document.createElement('script')script.src = 'static/js/echarts.js'script.onload = function() {this.initEcharts()this.initEcharts1()this.initEcharts2()}.bind(this)document.head.appendChild(script)}},methods: {initEcharts() {myChart = echarts.init(document.getElementById('echarts'))},initEcharts1() {myChart1 = echarts.init(document.getElementById('echarts1'))},initEcharts2() {myChart2 = echarts.init(document.getElementById('echarts2'))},updateEcharts(newValue, oldValue, ownerInstance, instance) {if (myChart != undefined) {myChart.setOption(newValue)}},updateEcharts1(newValue, oldValue, ownerInstance, instance) {if (myChart1 != undefined) {myChart1.setOption(newValue)}},updateEcharts2(newValue, oldValue, ownerInstance, instance) {if (myChart2 != undefined) {myChart2.setOption(newValue)}},}}
</script>
<style lang="scss">//第一行内容.title {// border:1px solid black;padding-left: 2%;font-size: 105%;}.line_position {overflow-x: scroll;scroll-behavior: smooth; // 设置滚动平滑过渡//隐藏滚动条&::-webkit-scrollbar {width: 0; // 隐藏默认的滚动条 height: 0;}&::-webkit-scrollbar-thumb {background-color: transparent; // 隐藏滚动条拖拽的小方块}.line1 {width: 400%;display: flex;// border:1px solid red;.item:nth-child(1) {background-color: #515dc3;}.item:nth-child(2) {background-color: #ff9a3e;}.item:nth-child(3) {background-color: #38bf80;}.item:nth-child(4) {background-color: #fc5959;}.item {width: 40%;margin: 1% 2%;border-radius: 5px;padding: 1% 1% 0 1%;// border:1px solid red;color: white;.two {display: flex;margin: 5% 0;align-items: center;// border:1px solid red;.left {width: 70%;font-size: 24px;// border:1px solid red;}.right {text-align: right;width: 30%;// border:1px solid red;}}.three {text-align: center;// border:1px solid red;image {width: 60px;height: 50px;}}}}}//第二行内容.tab_position {width: 100%;display: flex;justify-content: center;}.tab-bar {display: flex;justify-content: space-between;width: 90%;// border: 1px solid black;background-color: #f2f2f2;border-radius: 15px;margin: 3% 1%;}.tab {padding: 5px;font-size: 16px;cursor: pointer;// border: 1px solid black;width: 33%;text-align: center;// border-bottom: 1px solid #ccc;}.active {color: white;background-color: #515dc3;border-radius: 15px;/* background-color:#74bfe7; */// border-bottom: 1px solid #74bfe7;}//图标.out {width: 100%;display: flex;justify-content: center;}.echarts{width: 700rpx;height: 600rpx;}
</style>