- <template>
- <div>
- <div ref="assetEchart" class="asset_echart"></div>
- </div>
- </template>
- <script setup>
- import { init } from 'echarts';
- import { ref, onMounted } from 'vue';
- const assetEchart = ref(null);
- let echartsInstance = null;
- let curIndex = -1;
- let { xdata, data, color, name, data1, namme1 } = defineProps(['data']);
- console.log(data1, 'data1');
- const emit = defineEmits(['select-echart']);
- const initM = () => {
- const chart = init(assetEchart.value);
- echartsInstance = chart;
- window.addEventListener('resize', () => {
- chart.resize();
- });
- chart.setOption({
- title: {
- text: name,
- textStyle: {
- align: 'center',
- color: '#c6c6c6',
- fontSize: 13,
- },
- top: '3%',
- left: '10%',
- },
- grid: {
- top: '12%',
- right: '5%',
- left: '5%',
- bottom: '5%',
- containLabel: true,
- },
- backgroundColor: '#00314e',
- tooltip: {
- text: '1212',
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- label: {
- show: true,
- },
- },
- },
- xAxis: {
- data: xdata,
- axisTick: {
- show: true, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#c6c6c6', //X轴文字颜色
- fontSize: 12,
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- /*name: "亿元",*/
- minInterval: 1,
- nameTextStyle: {
- fontSize: 14,
- },
- splitLine: {
- show: true, // 显示网格线
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- axisTick: {
- show: true,
- },
- axisLine: {
- show: true,
- lineStyle: {
- // color: '#26D9FF',
- width: 2,
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#c6c6c6',
- fontSize: 12,
- },
- },
- },
- ],
- series: [
- {
- name,
- type: 'bar',
- select: {
- itemStyle: {
- borderWidth: 2,
- },
- },
- selectedMode: true,
- barWidth: 15,
- color,
- data,
- },
- {
- name: namme1,
- type: 'bar',
- select: {
- itemStyle: {
- borderWidth: 2,
- color: '#ddd',
- },
- },
- selectedMode: true,
- barWidth: 15,
- color,
- data: data1,
- },
- ],
- });
- chart.on('click', params => {
- console.log(params);
- const index = curIndex;
- emit('select-echart', {
- name: index === params.dataIndex ? '' : params.name,
- callback: () => {
- if (index === params.dataIndex) return;
- curIndex = params.dataIndex;
- chart.dispatchAction({
- type: 'select',
- dataIndex: params.dataIndex,
- });
- },
- });
- });
- };
-
- function restSelect() {
- if (curIndex === -1) return;
- echartsInstance.dispatchAction({ type: 'unselect', dataIndex: curIndex });
- curIndex = -1;
- }
- onMounted(() => {
- initM();
- });
- defineExpose({
- restSelect,
- });
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- width: 400px;
- height: 240px;
- &_echart {
- width: 100%;
- height: 100%;
- }
- }
- </style>