You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.1 KiB
140 lines
3.1 KiB
<template>
|
|
<view class="">
|
|
<view class="charts" ref="chartRef" id="main">
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
data() {
|
|
return {}
|
|
},
|
|
props: {
|
|
tochild: Number
|
|
},
|
|
created() {},
|
|
methods: {
|
|
//画图方法
|
|
renderChart() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
let myChart = echarts.init(document.getElementById('main'));
|
|
// 绘制图表
|
|
let option = {
|
|
title: {
|
|
// text: 'Stacked Line'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['订单笔数', '订单金额', '退货单数', '退货金额']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: "slider", //slider表示有滑动块的，
|
|
show: true,
|
|
xAxisIndex: [0], //表示x轴折叠
|
|
start: 1, //数据窗口范围的起始百分比,表示1%
|
|
end: 35, //数据窗口范围的结束百分比,表示35%坐标
|
|
bottom: "20",
|
|
},
|
|
|
|
],
|
|
|
|
|
|
|
|
//x轴
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日",
|
|
"15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日",
|
|
"27日", "28日", "29日", "30日", "31日"
|
|
]
|
|
},
|
|
//y轴
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '单数',
|
|
min: 0,
|
|
max: 5,
|
|
interval: 1,
|
|
splitNumber: 6, //设置坐标轴的分割段数
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
min: 0,
|
|
max: 200,
|
|
interval: 25,
|
|
splitNumber: 6, //设置坐标轴的分割段数
|
|
}
|
|
],
|
|
series: [{
|
|
name: '订单笔数',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
yAxisIndex: 0,
|
|
data: [15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45,
|
|
15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15
|
|
]
|
|
},
|
|
{
|
|
name: '订单金额',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
yAxisIndex: 1,
|
|
data: [80, 90, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85,
|
|
55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 17
|
|
]
|
|
},
|
|
{
|
|
name: '退货单数',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
yAxisIndex: 0,
|
|
data: [95, 12, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125,
|
|
95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 19
|
|
]
|
|
},
|
|
{
|
|
name: '退货金额',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
yAxisIndex: 1,
|
|
data: [80, 90, 95, 125, 115, 125, 90, 25, 95, 125, 115, 125, 90, 25, 95, 125, 115, 125,
|
|
90, 25, 95, 125, 115, 125, 90, 25, 95, 125, 115, 125, 24
|
|
]
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.renderChart()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.charts {
|
|
width: 100%;
|
|
height: 600rpx;
|
|
// margin-top: 80rpx;
|
|
}
|
|
</style>
|
|
|