uniapp打包安卓 使用echarts插件 柱状折线等...
因为安卓端没有dom操作所以要使用 renderjs
直接上代码
html
html
<template>
<view class="content">
<view
id="echartsa"
:prop="viewProp"
:change:prop="echarts.updateEcharts"
class="echarts"></view>
</view>
</template>js
javascript
<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
javascript
<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
css
<style>
.echarts {
width: 420px;
height: 300px;
}
</style>