fix:修改柱状图提示框样式

ZhangXianQiang

2024-03-08 2aa1d87680e9351bf027bab73f61290b7f00efe4

 src/views/daoAnOffice/right/analysis/index.vue

@@ -1,16 +1,24 @@
<!-- 交通安全形势研判分析 -->

<template>
  <RightTitle title="交通安全形势研判分析">
    <template #top>
      <div class="select-container flex">
        <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
          v-for="item in selectItems" :key="item.itemIndex" @click="changeChart(item)">
          {{ item.name }}
        </div>
      </div>
    </template>

    <template #content>
      <div class="charts-container">
        <div id="analysisChart" ref="analysisChart"></div>
        <div class="type-select-container" v-show="isShowSelect">
          <el-select v-model="typeValue" class="select-style" @change="setConfig">
            <el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </div>
      </div>
    </template>
  </RightTitle>
@@ -20,14 +28,24 @@
import RightTitle from "@/components/right-title";
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
// dom示例

// dom
const analysisChart = ref(null);
const echartRef = ref(null);

// echart实例
let echartObject = null;

// type选择
const typeValue = ref('');

// 是否显示下拉框
const isShowSelect = ref(true);



const selectItems = ref([
  { itemIndex: 1, name: '时间统计', isActive: false },
  { itemIndex: 2, name: '街道统计', isActive: true },
  { itemIndex: 1, name: '时间统计', isActive: true },
  { itemIndex: 2, name: '街道统计', isActive: false },
]);

const testData = ref([
@@ -42,8 +60,43 @@
  { name: '灌口街道', state1: 972, state2: 2124, state3: 1500 },
]);

const testData1 = ref([
  {
    name: '都江堰市',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '奎光塔街道',
    state: { '2023-1': 21, '2023-2': 12, '2023-3': 224, '2023-4': 662, '2023-5': 71 },
    state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '蒲阳街道',
    state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233, '2023-4': 2132, '2023-5': 3211 },
    state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '聚源镇',
    state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111, '2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '银杏街道',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 12 },
    state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123, '2023-4': 321, '2023-5': 2999 }
  },
  {
    name: '石羊镇',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
  },
]);
let acitveData = ref(testData1.value[0]);

const echartsConfig = {

// 圆柱图表
const barConfig = ref({
  legend: {
    right: '0',
    icon: 'circle',
@@ -72,7 +125,30 @@
    ]

  },
  tooltip: {},
  tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: '#000001cc',
      borderWidth: 0,
      textStyle: {
        color: '#4D76B0',
        fontSize: 16
      },
      axisPointer: {
        type: 'shadow',
        lable: {
          color: '#000000'
        }
      },
      padding: [20, 25],
      formatter: function (params) {
        let temp = params[0].name + '<br/>';
        params.forEach(element => {
          temp += element.seriesName + ':' + `<span style="color:${getColor(element.componentIndex)}">${element.value[`state${element.componentIndex + 1}`]}</span>` + '<br/>';
        });
        return temp;
      }
    },
  grid: {
    left: 0,
    right: 0,
@@ -84,10 +160,31 @@
    dimensions: ['name', 'state1', 'state2', 'state3'],
    source: testData.value
  },
  xAxis: { type: 'category', axisTick: false },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  xAxis: {
    type: 'category',
    axisTick: false,
    axisLabel: {
      fontSize: 14,
      color: '#4D76B0',
      margin: 15
    },
    axisLine: {
      lineStyle: {
        color: '#4d76b033'
      }
    }
  },
  yAxis: {
    axisLabel: {
      fontSize: 14,
      color: '#4D76B0',
    },
    splitLine: {
      lineStyle: {
        color: '#4d76b033'
      }
    }
  },
  series: [
    {
      type: 'bar',
@@ -156,128 +253,147 @@
      },
    },
  ]
});


// line配置
const lineConfig = ref(null);



// 图表更换
const changeChart = (selectItem) => {
  selectItems.value.map(item => item.isActive = false);
  selectItem.isActive = true;
  if (selectItem.itemIndex == 1) {
    echartObject.setOption(lineConfig.value, true);
    isShowSelect.value = true;
  } else {
    echartObject.setOption(barConfig.value, true);
    isShowSelect.value = false;
  }
}

const echartsLineConfig = {
  legend: {
    right: '0',
    icon: 'circle',
    textStyle: {
      color: 'rgba(77, 118, 176, 1)'
// 配置数据
const setConfig = () => {
  acitveData.value = testData1.value.find((item) => item.name === typeValue.value);
  lineConfig.value = {
    legend: {
      right: '12%',
      icon: 'circle',
      textStyle: {
        color: 'rgba(77, 118, 176, 1)'
      },
      data: [
        {

          name: '酒驾',
          itemStyle: {
            color: 'rgba(207, 178, 73, 1)'
          }
        },
        {
          name: '其他',
          itemStyle: {
            color: 'rgba(43, 176, 109, 1)'
          }
        },
      ],
    },
    data: [
      {
        name: '醉驾',
        itemStyle: {
          color: 'rgba(0, 168, 217, 1)'
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: '#000001cc',
      borderWidth: 0,
      textStyle: {
        color: '#4D76B0',
        fontSize: 16
      },
      axisPointer: {
        type: 'shadow',
        lable: {
          color: '#000000'
        }
      },
      padding: [20, 25],
      formatter: function (params) {
        let temp = params[0].name + '<br/>';
        params.forEach(element => {
          temp += element.seriesName + ':' + `<span style="color:${element.componentIndex === 1 ? '#2bb06d' : '#cfb249'}">${element.value}</span>` + '<br/>';
        });
        return temp;
      }
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Object.keys(acitveData.value.state),
      axisLabel: {
        fontSize: 14,
        color: '#4D76B0',
        margin: 15
      },

      axisTick: false,
      axisLine: {
        lineStyle: {
          color: '#4d76b033'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#4D76B0'
      },
      splitLine: {
        lineStyle: {
          color: '#4d76b033'
        }
      }
    },
    series: [
      {
        name: '酒驾',
        data: Object.entries(acitveData.value.state).map(([key, value]) => value),
        type: 'line',
        smooth: true,
        itemStyle: {
          color: 'rgba(207, 178, 73, 1)'
        }
      },
      {
        name: '其他',
        data: Object.entries(acitveData.value.state2).map(([key, value]) => value),
        type: 'line',
        smooth: true,
        itemStyle: {
          color: 'rgba(43, 176, 109, 1)'
        }
      },
      }
    ]

  },
  tooltip: {},
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: '15%',
    containLabel: true
  },
  dataset: {
    dimensions: ['name', 'state1', 'state2', 'state3'],
    source: testData.value
  },
  xAxis: { type: 'category', axisTick: false },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
      name: '醉驾',
      barWidth: 13,
      barGap: '50%',
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置
        color: 'rgba(0, 168, 217, 1)', // 标签颜色
        fontSize: 10,
      },
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0,
          [
            { offset: 0, color: 'rgba(14, 32, 54, 1)' },    // 0% 处的颜色
            { offset: 1, color: 'rgba(0, 168, 217, 1)' }     // 100% 处的颜色
          ]
        )
      },
    },
    {
      type: 'bar',
      name: '酒驾',
      barWidth: 13,
      barGap: '50%',
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置
        color: 'rgba(207, 178, 73, 1)', // 标签颜色
        fontSize: 10,
      },
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0,
          [
            { offset: 0, color: 'rgba(14, 31, 53, 1)' },    // 0% 处的颜色
            { offset: 1, color: 'rgba(207, 178, 73, 1)' }     // 100% 处的颜色
          ]
        )
      },
    },
    {
      type: 'bar',
      name: '其他',
      barWidth: 13,
      barGap: '50%',
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置
        color: 'rgba(43, 176, 109, 1)', // 标签颜色
        fontSize: 10,
      },
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0,
          [
            { offset: 0, color: 'rgba(14, 31, 53, 1)' },    // 0% 处的颜色
            { offset: 1, color: 'rgba(43, 176, 109, 1)' }     // 100% 处的颜色
          ]
        )
      },
    },
  ]
  }
  echartObject.setOption(lineConfig.value, true);
}


const getColor = (index) => {
  let colorList = ['#00a8d9', '#cfb249', '#2bb06d'];
  return colorList[index % colorList.length];
}

// 挂载
onMounted(() => {
  echartRef.value = echarts.init(analysisChart.value);
  echartRef.value.setOption(echartsConfig);
  echartObject = echarts.init(analysisChart.value);
  typeValue.value = testData1.value[0].name;
  setConfig();
})
</script>

@@ -289,10 +405,16 @@
.item {
  margin: 0 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-size: 14px;
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {
  color: #fff;
}

.item:last-child {
@@ -305,6 +427,15 @@
  padding: 20px;
  background-color: rgba(17, 34, 58, 0.6);
  border: 1px solid rgba(47, 91, 157, 0.8);
  position: relative;
}

.type-select-container {
  position: absolute;
  right: 20px;
  top: 14px;
  width: 120px;
  height: 23px;
}

#analysisChart {
@@ -312,4 +443,15 @@
  height: 100%;
  box-sizing: border-box;
}

::v-deep .el-input.el-input--suffix {
  .el-input__wrapper {
    background: rgba(67, 102, 155, 0.4) !important;
    border: 1px solid rgba(47, 91, 157, 0.8);
  }

  .el-input__inner {
    color: #4481DD;
  }
}
</style>