uniapp打包安卓 使用echarts插件 柱状折线等…
因为安卓端没有dom操作所以要使用 renderjs
直接上代码
html
<template><view class="content"><viewid="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 myChartexport 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>
