参考文章:https://blog.csdn.net/qq_29384789/article/details/107613568
<template>
<view>
...
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
import QiunDataCharts from '../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
export default {
components: {
QiunDataCharts
},
data() {
return {
chartData: {},
opts: {
color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,15],
legend: {},
rotate: true,
xAxis: {
disableGrid: true,
rotateLabel: true
},
yAxis: {
gridType: "dash",
dashLength: 2,
data: [{
position: 'left'
}, {
position: 'right'
}]
},
extra: {
line: {
type: "straight",
width: 2
}
},
index: 0
},
x: ''
};
},
mounted() {
this.xxx();
},
methods: {
xxx() {
api.xxx({
x: this.x
}, res=>{
console.log(res)
let {data} = res
if(data.length>0){
let arr = [], arr1=[], arr2=[]
data.forEach(item=>{
arr.push(item[0])
if(item[1]>=0){
arr1.push(item[1])
}else{
arr2.push(item[1])
}
})
let res = {
categories: arr,
series: [
{
name: "增长率趋势",
data: arr1,
index: 0
},
{
name: "增长率趋势",
data: arr2,
index: 1
},
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}
})
},
}
};
</script>
<style lang="scss" scoped>
@import url('@/css/common.css');
@import url('@/css/analysis.css');
</style>
网友评论