|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div ref="chartDom" class="charts"></div>
|
|
|
+ <div ref="chartDom" class="charts"></div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -8,18 +8,18 @@ import * as echarts from "echarts";
|
|
|
import { barOption } from "./options/barOption.js";
|
|
|
|
|
|
const props = defineProps({
|
|
|
- styleName: {
|
|
|
- type: String,
|
|
|
- default: "styleName1",
|
|
|
- },
|
|
|
- xData: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- yData: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
+ styleName: {
|
|
|
+ type: String,
|
|
|
+ default: "styleName1",
|
|
|
+ },
|
|
|
+ xData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ yData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
const chartDom = ref(null);
|
|
@@ -27,33 +27,99 @@ const myChart = ref(null);
|
|
|
const options = ref(null);
|
|
|
|
|
|
const initData = () => {
|
|
|
- if (props.styleName === "styleName2") {
|
|
|
- const arr = [];
|
|
|
- props.yData.forEach((item, index) => {
|
|
|
- arr.push({
|
|
|
- value:item.startNum,
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: item.startColor,
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: item.endColor,
|
|
|
- },
|
|
|
- ]),
|
|
|
- },
|
|
|
- });
|
|
|
+ if (props.styleName === "styleName2") {
|
|
|
+ const arr = [];
|
|
|
+ props.yData.forEach((item, index) => {
|
|
|
+ arr.push({
|
|
|
+ value: item.startNum,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: item.startColor,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: item.endColor,
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ barOption[props.styleName].series[0].data = arr;
|
|
|
+ } else {
|
|
|
+ barOption[props.styleName].series[0].data = props.yData;
|
|
|
+ }
|
|
|
+ barOption[props.styleName].xAxis.data = props.xData;
|
|
|
+ options.value = barOption[props.styleName];
|
|
|
+ myChart.value.setOption(options.value);
|
|
|
+
|
|
|
+ // 用于存储当前高亮的数据索引
|
|
|
+ let currentHighlightedIndex = null;
|
|
|
+ // 监听点击事件
|
|
|
+ myChart.value.on("click", (params) => {
|
|
|
+ // params 是点击事件返回的所有信息对象
|
|
|
+ console.log(params);
|
|
|
+
|
|
|
+ // 例如,可以在控制台输出点击的柱状图的值
|
|
|
+ console.log("你点击了:" + params.name + ",其值为:" + params.value);
|
|
|
|
|
|
+ // 如果当前已经有高亮的数据索引,并且不是当前点击的索引,则取消之前的高亮
|
|
|
+ if (currentHighlightedIndex !== null && currentHighlightedIndex !== params.dataIndex) {
|
|
|
+ // myChart.value.dispatchAction({
|
|
|
+ // type: 'downplay',
|
|
|
+ // seriesIndex: params.seriesIndex,
|
|
|
+ // dataIndex: currentHighlightedIndex
|
|
|
+ // });
|
|
|
+ // 取消之前高亮的效果(如果有的话)
|
|
|
+ myChart.value.dispatchAction({
|
|
|
+ type: "downplay",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: currentHighlightedIndex,
|
|
|
+ });
|
|
|
+ myChart.value.dispatchAction({
|
|
|
+ type: "downplay",
|
|
|
+ seriesIndex: 1,
|
|
|
+ dataIndex: currentHighlightedIndex,
|
|
|
+ });
|
|
|
+ myChart.value.dispatchAction({
|
|
|
+ type: "downplay",
|
|
|
+ seriesIndex: 2,
|
|
|
+ dataIndex: currentHighlightedIndex,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 高亮当前点击的柱状体
|
|
|
+ myChart.value.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: params.dataIndex,
|
|
|
+ });
|
|
|
+ // 高亮当前点击的柱状体
|
|
|
+ myChart.value.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 1,
|
|
|
+ dataIndex: params.dataIndex,
|
|
|
+ });
|
|
|
+ // 高亮当前点击的柱状体
|
|
|
+ myChart.value.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 2,
|
|
|
+ dataIndex: params.dataIndex,
|
|
|
+ });
|
|
|
+ console.log("00000000", params.dataIndex);
|
|
|
+
|
|
|
+ // 高亮当前点击的柱状体
|
|
|
+ // myChart.value.dispatchAction({
|
|
|
+ // type: 'highlight',
|
|
|
+ // seriesIndex: params.seriesIndex,
|
|
|
+ // dataIndex: params.dataIndex
|
|
|
+ // });
|
|
|
+
|
|
|
+ // 更新当前高亮的数据索引
|
|
|
+ currentHighlightedIndex = params.dataIndex;
|
|
|
});
|
|
|
- barOption[props.styleName].series[0].data = arr
|
|
|
- } else {
|
|
|
- barOption[props.styleName].xAxis.data = props.xData;
|
|
|
- barOption[props.styleName].series[0].data = props.yData;
|
|
|
- }
|
|
|
- options.value = barOption[props.styleName];
|
|
|
- myChart.value.setOption(options.value);
|
|
|
};
|
|
|
|
|
|
// // 窗口大小变化时重置 ECharts 宽高
|
|
@@ -75,14 +141,14 @@ const initData = () => {
|
|
|
// });
|
|
|
|
|
|
onMounted(() => {
|
|
|
- myChart.value = echarts.init(chartDom.value);
|
|
|
- initData();
|
|
|
+ myChart.value = echarts.init(chartDom.value);
|
|
|
+ initData();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.charts {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|