84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<template>
|
|
<view>
|
|
<view id="chart" style="width: 100%; height: 400px;"></view>
|
|
<view id="pie" style="width: 100%; height: 400px;"></view>
|
|
<view id="category" style="width: 100%; height: 400px;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "../../js_sdk/u-charts/echarts.min.js"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
category: null,
|
|
pie: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.chart = echarts.init(document.getElementById('chart'))
|
|
this.chart.setOption({
|
|
color: ['#614321', '#456124'],
|
|
xAxis: {
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [23, 24, 18, 25, 27, 100, 25]
|
|
}, {
|
|
type: 'bar',
|
|
data: [23, 24, 18, 25, 27, 42, 25]
|
|
}]
|
|
})
|
|
})
|
|
this.$nextTick(() => {
|
|
this.pie = echarts.init(document.getElementById("pie"))
|
|
this.pie.setOption({
|
|
series: [{
|
|
type: "pie",
|
|
data: [{
|
|
value: 10,
|
|
name: "10%"
|
|
}, {
|
|
value: 20,
|
|
name: "20%"
|
|
}, {
|
|
value: 25,
|
|
name: "25%"
|
|
}, {
|
|
value: 10,
|
|
name: "10%"
|
|
}, {
|
|
value: 15,
|
|
name: "15%"
|
|
}, {
|
|
value: 20,
|
|
name: "20%"
|
|
}]
|
|
}]
|
|
})
|
|
})
|
|
this.$nextTick(() => {
|
|
this.category = echarts.init(document.getElementById("category"))
|
|
this.category.setOption({
|
|
xAxis: {
|
|
data: [30, 20, 31, 41, 73, 42, 25]
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
type: "line",
|
|
data: [23, 24, 18, 25, 27, 42, 25]
|
|
}, {
|
|
type: "line",
|
|
data: [32, 24, 42, 25, 72, 42, 25]
|
|
}]
|
|
})
|
|
})
|
|
}
|
|
}
|
|
</script>
|