- <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 emit = defineEmits(['updateKey']);
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //数据
- echartData: {
- type: Object,
- default: {},
- },
- });
-
- const id = guid();
- const myChart = shallowRef('');
- let activeName = ref(null);
-
- 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({
- legend: {
- top: nowSize(10, 1920),
- itemHeight: nowSize(10, 1920),
- itemWidth: nowSize(10, 1920),
- x: '34%',
- itemGap: nowSize(50, 1920),
- textStyle: {
- color: '#FFFFFF',
- fontSize: 14,
- },
- orient: 'horizontal',
- icon: 'circle',
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- formatter: function (params) {
- if (params[0].seriesName == '行驶里程') {
- return params[0].seriesName + ' : ' + params[0].value + '公里';
- } else {
- return params[0].seriesName + ' : ' + params[0].value + '分钟';
- }
- },
- },
- grid: [
- {
- show: false,
- left: '20%',
- top: nowSize(44, 1920),
- bottom: nowSize(6, 1920),
- containLabel: true,
- width: '38%',
- },
- {
- show: false,
- left: '20%',
- top: nowSize(44, 1920),
- bottom: nowSize(26, 1920),
- width: '0',
- containLabel: false,
- },
- {
- show: false,
- right: '4%',
- top: nowSize(44, 1920),
- bottom: nowSize(6, 1920),
- containLabel: true,
- width: '38%',
- },
- ],
- xAxis: [
- {
- type: 'value',
- inverse: true,
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- color: '#D8F1FF',
- fontSize: nowSize(12, 1920),
- },
- splitLine: {
- //网格线
- lineStyle: {
- type: 'dashed',
- color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
- },
- show: true, //隐藏或显示
- },
- },
- {
- gridIndex: 1,
- show: false,
- },
- {
- gridIndex: 2,
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- color: '#D8F1FF',
- fontSize: nowSize(12, 1920),
- },
- splitLine: {
- //网格线
- lineStyle: {
- type: 'dashed',
- color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
- },
- show: true, //隐藏或显示
- },
- },
- ],
- yAxis: [
- {
- type: 'category',
- inverse: true,
- position: 'right',
- splitArea: {
- show: true,
- areaStyle: {
- color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
- },
- },
- axisLine: {
- show: false,
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- data: props.echartData.xData,
- },
- {
- gridIndex: 1,
- type: 'category',
- inverse: true,
- position: 'left',
- triggerEvent: true,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- // color: "rgba(255, 255, 255, 1)",
- fontSize: nowSize(14, 1920),
- color: (value, index) => {
- if (activeName.value == index) {
- return '#2CBBB6';
- } else {
- return 'rgba(255, 255, 255, 1)';
- }
- },
- },
- data: props.echartData.xData,
- },
- {
- gridIndex: 2,
- type: 'category',
- inverse: true,
- position: 'left',
- splitArea: {
- show: true,
- areaStyle: {
- color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
- },
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.5)',
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- data: props.echartData.xData,
- },
- ],
- series: [
- {
- name: '行驶里程',
- type: 'bar',
- barWidth: 12,
- stack: '1',
- barWidth: nowSize(10, 1920),
- itemStyle: {
- barBorderRadius: nowSize(5, 1920),
- color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
- {
- offset: 0,
- color: 'rgba(0, 238, 253, 1)',
- },
- {
- offset: 1,
- color: 'rgba(0, 238, 253, 0)',
- },
- ]),
- },
- data: props.echartData.data1,
- },
- {
- name: '行驶时长',
- type: 'bar',
- stack: '2',
- barWidth: 12,
- xAxisIndex: 2,
- yAxisIndex: 2,
- barWidth: nowSize(10, 1920),
- itemStyle: {
- barBorderRadius: nowSize(5, 1920),
- color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
- {
- offset: 0,
- color: 'rgba(255, 255, 0, 0)',
- },
- {
- offset: 1,
- color: 'rgba(255, 255, 0, 1)',
- },
- ]),
- },
- data: props.echartData.data2,
- },
- ],
- });
- myChart.value.on('click', params => {
- activeName.value = params.dataIndex;
- emit('updateKey', activeName.value);
- myChart.value.resize();
- });
- }
- onMounted(() => {
- intChart();
- window.addEventListener('resize', resizeTheChart);
- });
- </script>
-
- <style lang="scss" scoped>
- .chartBox {
- width: 100%;
- height: 100%;
- }
- </style>