uni-app：服务器端数据绘制多个echarts图标（renderjs解决手机端无法显示问题）

本文主要是介绍uni-app：服务器端数据绘制多个echarts图标（renderjs解决手机端无法显示问题），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

代码 

<template><view><view :prop="option1" :change:prop="echarts.updateEcharts1" id="echarts1"class="echarts"></view><view :prop="option2" :change:prop="echarts.updateEcharts2" id="echarts2"class="echarts"></view></view></template><script>export default {data() {return {option1: '',option2: '',}},mounted() {this.getData(); // 在组件挂载后调用获取数据的方法},methods: {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 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: {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 myChart1let myChart2export default {mounted() {// 首先判断window.echarts是否存在，如果存在则调用initEcharts1方法进行初始化。if (typeof window.echarts === 'function') {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.initEcharts1()this.initEcharts2()}.bind(this)document.head.appendChild(script)}},methods: {initEcharts1() {myChart1 = echarts.init(document.getElementById('echarts1'))},initEcharts2() {myChart2 = echarts.init(document.getElementById('echarts2'))},updateEcharts1(newValue, oldValue, ownerInstance, instance) {if (myChart1 != undefined) {myChart1.setOption(newValue)}},updateEcharts2(newValue, oldValue, ownerInstance, instance) {if (myChart2 != undefined) {myChart2.setOption(newValue)}},}}
</script><style>.echarts {width: 100%;height: 300px;}
</style>

这篇关于uni-app：服务器端数据绘制多个echarts图标（renderjs解决手机端无法显示问题）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---