uniapp打包安卓 使用echarts插件 柱状折线等...

uniapp打包安卓 使用echarts插件 柱状折线等…

因为安卓端没有dom操作所以要使用 renderjs

直接上代码

html

<template>
	<view class="content">
		<view
			id="echartsa"
			:prop="viewProp"
			:change:prop="echarts.updateEcharts"
			class="echarts"></view>
	</view>
</template>

js

<script>
	import { showApi } from '../../../api/index.js'; //测试接口
	import { onLoad } from '@dcloudio/uni-app';
	export default {
		data() {
			return {
				name: '',
			};
		},
		mounted() {
			this.getdata(); //测试调用
		},
		methods: {
			async getdata() {
				const res = await showApi();
				this.name = res; //测试数据
			},
		},
		computed: {
			viewProp() {
				return {
					option: this.name, //测试数据
				};
			},
		},
	};
</script>

renderjs

<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts';
	 let myChart
	 export default {
		 data(){
			 return{
			  category:[
	            "2012年",
	            "2013年",
	            "2014年",
	            "2015年",
	            "2016年",
	            "2017年",
	            "2018年",
	          ],
	          dottedBase:[],
	          lineData : [
	            18092, 24045, 32808, 36097, 44715, 50415, 56061, 59521, 18092, 24045, 32808,
	            36097, 44715, 50415, 39867, 44715, 48444, 50415, 50061, 32677, 49521, 32808,
	          ],
	          barData : [
	            4600, 5500, 7500, 8500, 12500, 21500, 23200, 25250, 4600, 5500, 6500, 8500,
	            22500, 21500, 9900, 12500, 14000, 21500, 23200, 24450, 25250, 7500,
	          ],
	          rateData : [],
			  name:''
			 }
		 },
	     mounted() {
	     	// 判断
	         if (typeof window.echarts === 'function') {
	             this.initEcharts()
	         } else {
	             const script = document.createElement('script')
	             script.src = 'static/echarts.min.js'
	             script.onload = this.initEcharts.bind(this)
	             document.head.appendChild(script)
	         }

	     },
	     methods: {
				updateEcharts(newValue, oldValue, ownerInstance, instance) {
						this.name = newValue.option.msg //调用一次
			     },
	        initEcharts() {
				for (var i = 0; i < 33; i++) {
				   var rate = (this.barData[i] / this.lineData[i]) * 100;
				   this.rateData[i] = rate.toFixed(2);
				 }
			    var option = {
	              title: {
	                text: "",
	                x: "center",
	                y: 0,
	                textStyle: {
	                  color: "#B4B4B4",
	                  fontSize: 16,
	                  fontWeight: "normal",
	                },
	              },
	              tooltip: {
	                trigger: "axis",
	                backgroundColor: "rgba(255,255,255,0.1)",
	                axisPointer: {
	                  type: "shadow",
	                  label: {
	                    show: true,
	                    backgroundColor: "",
	                  },
	                },
	              },
	              legend: {
	                data: [this.name, "交易笔数"], //测试数据
	                textStyle: {
	                  color: "#B4B4B4",
	                },
	                top: "7%",
	              },
	              grid: {
	                x: "12%",
	                width: "82%",
	                y: "12%",
	              },
	              xAxis: {
	                name: "时",
	                data: this.category,
	                axisLine: {
	                  lineStyle: {
	                    color: "#B4B4B4",
	                  },
	                },
	                axisTick: {
	                  show: false,
	                },
	              },
	              yAxis: [
	                {
	                  name: "元",
	                  splitLine: { show: false },
	                  axisLine: {
	                    lineStyle: {
	                      color: "#B4B4B4",
	                    },
	                  },

	                  axisLabel: {
	                    formatter: "{value} ",
	                  },
	                },
	                {
	                  name: "笔",
	                  splitLine: { show: false },
	                  axisLine: {
	                    lineStyle: {
	                      color: "#B4B4B4",
	                    },
	                  },
	                  axisLabel: {
	                    formatter: "{value} ",
	                  },
	                },
	              ],
	              series: [
	                {
	                  name: "交易笔数",
	                  type: "line",
	                  smooth: true,
	                  showAllSymbol: true,
	                  symbol: "emptyCircle",
	                  symbolSize: 4,
	                  yAxisIndex: 1,
	                  itemStyle: {
	                    normal: {
	                      color: "#FFE666",
	                    },
	                  },
	                  data: this.rateData,
	                },

	                {
	                  name: this.name, //测试数据
	                  type: "bar",
	                  barWidth: 10,
	                  itemStyle: {
	                    normal: {
	                      barBorderRadius: 10,
	                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                        { offset: 0, color: "#26FFDB" },
	                        { offset: 1, color: "#0F5C74" },
	                      ]),
	                    },
	                  },
	                  data: this.barData,
	                },
	              ],
	            };
	            myChart = echarts.init(document.getElementById('echartsa'))
	            myChart.setOption(option)
					    myChart.resize()
	            window.addEventListener('resize', () => {
	                myChart.resize()
	            });
	         },
	     }
	 }
</script>

css

<style>
	.echarts {
		width: 420px;
		height: 300px;
	}
</style>