| | <template> |
---|
| | <div class="chartBox" :id="id"></div> |
---|
| | </template> |
---|
| | <script setup name="pieChartGszl"> |
---|
| | import { guid } from '@/utils/ruoyi'; |
---|
| | const { proxy } = getCurrentInstance(); |
---|
| | import { nowSize } from '@/utils/util.js'; |
---|
| | import moment from 'moment'; |
---|
| | const props = defineProps({ |
---|
| | //刷新标志 |
---|
| | refresh: { |
---|
| | type: [String, Number], |
---|
| | default: 1, |
---|
| | }, |
---|
| | //数据 |
---|
| | echartData: { |
---|
| | type: Object, |
---|
| | default: {}, |
---|
| | }, |
---|
| | }); |
---|
| | |
---|
| | const id = guid(); |
---|
| | const myChart = shallowRef(''); |
---|
| | |
---|
| | watch( |
---|
| | () => props.refresh, |
---|
| | value => { |
---|
| | //先销毁实例 |
---|
| | myChart.value && myChart.value.dispose(); |
---|
| | intChart(); |
---|
| | } |
---|
| | ); |
---|
| | //自适应 |
---|
| | function resizeTheChart() { |
---|
| | if (myChart.value) { |
---|
| | myChart.value.resize(); |
---|
| | } |
---|
| | } |
---|
| | //初始化 |
---|
| | function intChart() { |
---|
| | myChart.value = proxy.echarts.init(document.getElementById(id)); |
---|
| | myChart.value.clear(); |
---|
| | // 绘制图表 |
---|
| | myChart.value.setOption({ |
---|
| | tooltip: { |
---|
| | trigger: 'axis', |
---|
| | axisPointer: { |
---|
| | type: 'shadow', |
---|
| | // label: { |
---|
| | // show: true, |
---|
| | // } |
---|
| | }, |
---|
| | formatter: function (params) { |
---|
| | return params[0].name + ' : ' + params[0].value + '人'; |
---|
| | }, |
---|
| | }, |
---|
| | grid: { |
---|
| | top: nowSize(14, 1920), |
---|
| | bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小 |
---|
| | left: nowSize(100, 1920), |
---|
| | right: nowSize(20, 1920), |
---|
| | }, |
---|
| | xAxis: { |
---|
| | type: 'value', |
---|
| | axisLine: { |
---|
| | show: false, //隐藏X轴轴线 |
---|
| | lineStyle: { |
---|
| | color: 'rgba(44, 110, 189, 1)', |
---|
| | }, |
---|
| | }, |
---|
| | axisTick: { |
---|
| | show: false, //隐藏X轴刻度 |
---|
| | lineStyle: { |
---|
| | color: 'rgba(44, 110, 189, 1)', |
---|
| | }, |
---|
| | }, |
---|
| | axisLabel: { |
---|
| | show: true, |
---|
| | color: '#39F7FF', |
---|
| | fontSize: nowSize(14, 1920), |
---|
| | }, |
---|
| | splitLine: { |
---|
| | //网格线 |
---|
| | lineStyle: { |
---|
| | type: 'dashed', |
---|
| | color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线 |
---|
| | }, |
---|
| | show: true, //隐藏或显示 |
---|
| | }, |
---|
| | }, |
---|
| | yAxis: { |
---|
| | type: 'category', |
---|
| | data: props.echartData.xData, |
---|
| | name: '巡查人数', |
---|
| | nameLocation: 'start', |
---|
| | nameTextStyle: { |
---|
| | color: '#39F7FF', |
---|
| | fontSize: nowSize(14, 1920), |
---|
| | padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)], |
---|
| | }, |
---|
| | axisTick: { |
---|
| | show: false, //隐藏X轴刻度 |
---|
| | lineStyle: { |
---|
| | color: 'rgba(44, 110, 189, 1)', |
---|
| | }, |
---|
| | }, |
---|
| | axisLine: { |
---|
| | show: false, |
---|
| | }, |
---|
| | axisLabel: { |
---|
| | show: true, |
---|
| | color: 'rgba(255, 255, 255, 1)', |
---|
| | fontSize: nowSize(13, 1920), |
---|
| | }, |
---|
| | // splitArea: { |
---|
| | // show: true, |
---|
| | // areaStyle: { |
---|
| | // color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"] |
---|
| | // } |
---|
| | // } |
---|
| | }, |
---|
| | series: [ |
---|
| | { |
---|
| | type: 'bar', |
---|
| | name: '巡查人数', |
---|
| | data: props.echartData.data, |
---|
| | barWidth: nowSize(10, 1920), |
---|
| | zlevel: 1, |
---|
| | itemStyle: { |
---|
| | barBorderRadius: nowSize(5, 1920), |
---|
| | color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [ |
---|
| | { |
---|
| | offset: 0, |
---|
| | color: 'rgba(0, 167, 245,1)', |
---|
| | }, |
---|
| | { |
---|
| | offset: 1, |
---|
| | color: 'rgba(0, 238, 253,1)', |
---|
| | }, |
---|
| | ]), |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '背景', |
---|
| | type: 'bar', |
---|
| | barWidth: nowSize(10, 1920), |
---|
| | barGap: '-100%', |
---|
| | data: props.echartData.num, |
---|
| | itemStyle: { |
---|
| | barBorderRadius: nowSize(5, 1920), |
---|
| | color: 'rgba(77, 149, 217, 0.15)', |
---|
| | }, |
---|
| | }, |
---|
| | ], |
---|
| | }); |
---|
| | } |
---|
| | onMounted(() => { |
---|
| | intChart(); |
---|
| | window.addEventListener('resize', resizeTheChart); |
---|
| | }); |
---|
| | </script> |
---|
| | |
---|
| | <style lang="scss" scoped> |
---|
| | .chartBox { |
---|
| | width: 100%; |
---|
| | height: 100%; |
---|
| | } |
---|
| | </style> |
---|
| | |
---|
| | |
|