122 lines
2.9 KiB
Vue
122 lines
2.9 KiB
Vue
<template>
|
|
<view style="width:100%; height: 1000rpx; background:#FFFFFF;">
|
|
<view style="width:100%; height: 800rpx;">
|
|
<l-echart ref="chart"></l-echart>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
|
|
|
|
export default {
|
|
components: { LEchart },
|
|
data() {
|
|
return {
|
|
option: {
|
|
title: {
|
|
text: 'Stacked Line',
|
|
x: 'center',
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: '#333'
|
|
},
|
|
padding: [10, 0, 10, 0] // 预留标题上下间距，避免与图例冲突
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['价格', '数量'],
|
|
orient: 'horizontal',
|
|
bottom: '10%',
|
|
padding: [10, 20, 20, 20],
|
|
itemGap: 20,
|
|
textStyle: {
|
|
fontSize: 24,
|
|
color: '#333'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '15%',
|
|
bottom: '30%', // 增大底部预留空间
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
axisLabel: {
|
|
fontSize: 12
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '价格',
|
|
position: 'left',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#c23531'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} 元',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '数量',
|
|
position: 'right',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#2f4554'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} 件',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
],
|
|
dataZoom: [{}],
|
|
series: [
|
|
{
|
|
name: '价格',
|
|
type: 'line',
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
yAxisIndex: 0,
|
|
smooth: true,
|
|
symbolSize: 6,
|
|
itemStyle: { color: '#c23531' },
|
|
lineStyle: { width: 2 }
|
|
},
|
|
{
|
|
name: '数量',
|
|
type: 'line',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
symbolSize: 6,
|
|
itemStyle: { color: '#2f4554' },
|
|
lineStyle: { width: 2 }
|
|
}
|
|
],
|
|
color: ['#c23531', '#2f4554']
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$refs.chart.init(echarts, chart => {
|
|
chart.setOption(this.option);
|
|
});
|
|
}
|
|
};
|
|
</script>
|