- <template>
- <div ref="assetEchart" class="asset_echart"></div>
- </template>
- <script setup>
- import { init } from 'echarts';
- import * as echarts from 'echarts';
-
- const assetEchart = ref(null);
- const emit = defineEmits(['click-call-back']);
- const initM = () => {
- const chart = init(assetEchart.value);
- window.addEventListener('resize', () => {
- chart.resize();
- });
- chart.setOption({
- title: {
- text: '',
- show: false,
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- },
- legend: {
- show: false,
- },
- grid: {
- top: '10%',
- left: '-20%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01],
- axisTick: {
- show: false, // 不显示坐标轴刻度线
- },
-
- axisLabel: {
- color: '#60C2FF',
- show: true,
- },
- splitNumber: 5,
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dotted',
- color: 'rgba(255, 255, 255,0.3)',
- },
- },
- },
- yAxis: {
- type: 'category',
- data: ['远期(2035年)', '中期(2030年)', '近期(2020年)'],
- name: '再生水利用(%)',
- nameTextStyle: {
- color: 'rgba(96, 194, 255, 1)',
- nameLocation: 'start',
- padding: [1, 10, -118, -130],
- },
- axisLabel: {
- color: '#fff',
- show: true,
- margin: 110,
- width: 120,
- overflow: 'truncate',
- align: 'left', // 设置为 left 表示左对齐
- fontSize: '14',
- },
- axisTick: {
- show: false, // 不显示坐标轴刻度线
- },
- axisLine: {
- show: false,
- },
- },
- series: [
- {
- name: '再生水利用(%)',
- type: 'bar',
- data: [40, 30, 20],
- barWidth: '8',
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(255, 237, 82, 0)', // 0% 处的颜色
- },
- {
- offset: 1,
- color: 'rgba(255, 237, 82, 1)', // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- },
- },
- ],
- });
- chart.on('click', function (params) {
- console.log(params, 'paramsparams');
- emit('click-call-back', { ...params });
- });
- };
- function chartSize(container, charts) {
- function getStyle(el, name) {
- if (window.getComputedStyle) {
- return window.getComputedStyle(el, null);
- } else {
- return el.currentStyle;
- }
- }
- const hi = getStyle(container, 'height').height;
- charts.style.height = hi;
- }
- watchEffect(() => {});
- onMounted(() => {
- initM();
- });
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- width: 430px;
- height: 120px;
- // margin-left:-30px;
- &_echart {
- width: 100%;
- height: 100%;
- }
- }
- </style>