123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- <template>
- <div class="lun-main">
- <div style="padding: 10px 10px">
- <span style="color: #000; font-size: 18px">用车次数</span>
- <div style="margin-top: 60px; width: 100px; text-align: center">
- <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">168</div>
- <div style="color: #000; font-size: 14px">总体用车次数</div>
- </div>
- <div style="margin-top: 20px; width: 100px; text-align: center">
- <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">13</div>
- <div style="color: #000; font-size: 14px">本机构用车次数</div>
- </div>
- </div>
- <div style="padding: 10px 10px 10px 0">
- <div style="display: flex;">
- <a-radio-group name="radioGroup" :default-value="1">
- <a-radio :value="1"> 日 </a-radio>
- <a-radio :value="2"> 周 </a-radio>
- <a-radio :value="3"> 月 </a-radio>
- <a-radio :value="4"> 年 </a-radio>
- </a-radio-group>
- <a-range-picker
- :value="[startDate,endDate]"
- disabled
- style="width: 100%"
- v-model="daterangeCreateTime"
- valueFormat="YYYY-MM-DD"
- format="YYYY-MM-DD"
- allow-clear
- />
- </div>
-
- <div ref="chart" class="item" style="width: 380px; height: 260px" />
- </div>
- </div>
- </template>
- <script>
- import * as echarts from 'echarts'
- import moment from 'moment';
- export default {
- data() {
- return {
- daterangeCreateTime: [],
- dateFormat:'YYYY-MM-DD',
- startDate :'2023-08-28',
- endDate:'2023-08-28',
- moment: moment
- }
- },
- mounted() {
- // 获取dom容器
- const chartDom = this.$refs.chart
- // 初始化图表实例
- this.chart = echarts.init(chartDom)
- this.initChart()
- // console.log("da======ta", this.processData, this.maxNum);
- },
- methods: {
- initChart() {
- const data = [220, 182, 191, 234, 290, 330, 310]
- const sideData = data.map((item) => item + 4.5)
- const option = {
- tooltip: {
- trigger: 'axis',
- formatter: '{b} : {c}',
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
- },
- },
- xAxis: {
- data: [
- '两江支队',
- '鸳鸯消防救援站',
- '翠云消防救援站',
- '龙头寺消防救援站',
- '大竹林特勤站',
- '礼嘉消防救援站',
- '奥园消防救援站',
- ],
- //坐标轴
- axisLine: {
- lineStyle: {
- color: '#3eb2e8',
- },
- },
- //坐标值标注
- axisLabel: {
- show: true,
- interval: 0,
- rotate: 30,
- textStyle: {
- color: '#3eb2e8',
- fontSize: 12,
- },
- },
- },
- yAxis: {
- //坐标轴
- axisLine: {
- show: false,
- },
- //坐标值标注
- axisLabel: {
- show: true,
- textStyle: {
- color: '#000',
- },
- },
- //分格线
- splitLine: {
- lineStyle: {
- color: '#ccc',
- },
- },
- },
- series: [
- {
- name: 'a',
- tooltip: {
- show: false,
- },
- type: 'bar',
- barWidth: 14.5,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 1,
- 0,
- 0,
- [
- {
- offset: 0,
- color: '#0B4EC3', // 0% 处的颜色
- },
- {
- offset: 0.6,
- color: '#138CEB', // 60% 处的颜色
- },
- {
- offset: 1,
- color: '#17AAFE', // 100% 处的颜色
- },
- ],
- false
- ),
- },
- },
- data: data,
- barGap: 0,
- },
- {
- type: 'bar',
- barWidth: 0,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 1,
- 0,
- 0,
- [
- {
- offset: 0,
- color: '#09337C', // 0% 处的颜色
- },
- {
- offset: 0.6,
- color: '#0761C0', // 60% 处的颜色
- },
- {
- offset: 1,
- color: '#0575DE', // 100% 处的颜色
- },
- ],
- false
- ),
- },
- },
- barGap: 0,
- data: sideData,
- },
- // {
- // name: 'b',
- // tooltip: {
- // show: false,
- // },
- // type: 'pictorialBar',
- // itemStyle: {
- // borderWidth: 1,
- // borderColor: '#0571D5',
- // color: '#1779E0',
- // },
- // symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
- // symbolSize: ['30', '12'],
- // symbolOffset: ['0', '-11'],
- // //symbolRotate: -5,
- // symbolPosition: 'end',
- // data: data,
- // z: 3,
- // },
- ],
- }
- this.chart.setOption(option)
- },
- },
- }
- </script>
- <style lang="less" scoped>
- .lun-main {
- width: 400px;
- height: 300px;
- display: flex;
- justify-content: space-between;
- margin-left: 10px;
- // background-color: aqua;
- border-left: 1px solid #ccc;
- pointer-events: all;
- padding-right: 10px;
- }
- </style>
|