- <template>
- <div ref="assetEchart" class="asset_echart"></div>
- </template>
- <script setup>
- import { init } from 'echarts';
-
- const assetEchart = ref(null);
- let {
- data: {
- xData,
- legend,
- yData: { contractCount, paymentMoney, contractMoney },
- },
- } = defineProps(['data']);
- let options = reactive({
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#fff',
- },
- },
- },
- legend: {
- data: legend,
- textStyle: {
- color: '#c6c6c6',
- },
- },
- grid: {
- left: '3%',
- right: '3%',
- bottom: '5%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- data: xData,
- axisPointer: {
- type: 'shadow',
- },
- axisLabel: {
- color: '#fff',
- },
- },
- ],
- yAxis: [
- {
- type: 'value',
- name: '数量',
- min: 0,
- interval: 10,
- axisLabel: {
- formatter: '{value}',
- color: '#fff',
- },
- },
- {
- type: 'value',
- name: legend[2],
- interval: 5,
- axisLabel: {
- formatter: '{value}',
- color: '#fff',
- },
- },
- ],
- series: [
- {
- barWidth: '18px',
- name: legend[0],
- type: 'bar',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- },
- },
- data: paymentMoney,
- itemStyle: {
- color: '#0f69ff',
- },
- },
- {
- name: legend[1],
- type: 'line',
- yAxisIndex: 1,
- tooltip: {
- valueFormatter: function (value) {
- return value;
- },
- },
- data: contractMoney,
-
- smooth: true,
- itemStyle: {
- normal: {
- color: '#ffa773', //折线点的颜色
- borderColor: '#fff', //拐点边框颜色
- borderWidth: 5, //拐点边框大小
- },
- },
- lineStyle: {
- color: '#ffa773', //折线的颜色
- },
- },
- ],
- });
- onMounted(() => {
- const chart = init(assetEchart.value);
- chart.setOption(options);
- window.addEventListener('resize', () => {
- chart.resize();
- });
- });
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- // width: 530px;
- height: calc(100% - 20px);
- // margin: 10px 14px 0 16px;
- // padding: 24px;
- &_echart {
- width: 100%;
- height: 100%;
- }
- }
- </style>