- <template>
- <div>
- <div ref="assetEchart" class="asset_echart"></div>
- </div>
- </template>
- <script setup>
- import { init } from 'echarts';
- const assetEchart = ref(null);
- let { yData, bottom, xData, data } = defineProps(['data', 'bottom', 'xData', 'yData']);
-
- const initM = () => {
- const chart = init(assetEchart.value);
- window.addEventListener('resize', () => {
- chart.resize();
- });
- chart.setOption({
- grid: {
- top: '0%',
- right: '0%',
- left: '-10%',
- bottom: '0%',
- containLabel: true,
- },
- tooltip: {
- show: true,
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- textStyle: {
- fontSize: 12,
- },
- formatter: function (params) {
- let dom = `${params[0].name}
- <br/>`;
- for (let i of params) {
- dom += `${i.marker}
- ${i.seriesName}
- :
- ${i.value}
- <br/>`;
- }
- return dom;
- },
- },
- legend: {
- show: false,
- itemWidth: 14,
- top: '0',
- left: 'center',
- data: data.titleArray,
- textStyle: {
- color: '#c6c6c6',
- },
- },
- xAxis: [
- {
- type: 'category',
- color: '#c6c6c6',
- data: xData,
- axisLabel: {
- margin: 10,
- color: '#c6c6c6',
- textStyle: {
- fontSize: 13,
- },
- },
- axisLine: {
- lineStyle: {
- color: '#c6c6c6',
- },
- },
- axisTick: {
- show: true,
- lineStyle: {
- color: '#ddd',
- },
- },
- },
- ],
- yAxis: [
- {
- min: 0,
- show: false,
- axisLabel: {
- color: '#c6c6c6',
- textStyle: {
- fontSize: 16,
- },
- },
- axisLine: {
- lineStyle: {
- color: '#c6c6c6',
- },
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- lineStyle: {
- color: '#ddd',
- type: 'dashed',
- },
- },
- },
- ],
- series: [
- {
- name: data.titleArray[0],
- type: 'bar',
- data: yData,
- barWidth: '30px',
- itemStyle: {
- color: function (params) {
- return data.colorList[params.dataIndex];
- },
- barBorderRadius: [0, 0, 0, 0],
- },
- },
- ],
- });
- };
-
- onMounted(() => {
- initM();
- });
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- width: 318px;
- height: 116px;
- // margin: 10px 14px 0 16px;
- &_echart {
- width: 100%;
- height: 100%;
- }
- }
- </style>