https://echarts.apache.org/examples/zh/index.html
communityOption: {
xAxis: {
type: "category",
data: [
"文章总量",
"文章本月新增",
"文章本周新增",
"",
"观点总量",
"观点本月新增",
"观点本周新增",
"",
"回答总量",
"回答本月新增",
"回答本周新增",
"",
"话题总量",
"话题本月新增",
"话题本周新增",
"",
"问题总量",
"问题本月新增",
"问题本周新增"
],
axisLabel: {
interval: 0,
rotate: -20
}
},
yAxis: {
type: "value"
},
series: [
{
data: [],
barWidth: 10,
type: "bar"
}
]
}
<template>
<div class="echarts">
<div :id="id" :style="[size]"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "pieChart",
props: {
option: {
type: Object,
default: null
},
id: {
type: String,
default: null
},
width: {
type: String,
default: "400px"
},
height: {
type: String,
default: "400px"
}
},
data() {
return {
size: {
width: this.width,
height: this.height
}
};
},
mounted() {},
watch: {
option: {
handler(newValue, oldValue) {
this.myEcharts();
},
immediate: true,
deep: true
}
},
methods: {
myEcharts() {
this.$nextTick(() => {
const chartDom = document.getElementById(this.id);
const myChart = echarts.init(chartDom);
this.option && myChart.setOption(this.option);
});
}
}
};
</script>
<style></style>
<template>
<div class="echarts">
<div :id="id" :style="[size]"></div>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts/core';
import {
PieChart,
BarSeriesOption,
LineChart,
LineSeriesOption,
} from 'echarts/charts';
import {
TitleComponent,
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
DatasetComponent,
DatasetComponentOption,
TransformComponent,
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
>;
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
PieChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
]);
const props = defineProps({
option: {
type: Object,
default: null,
},
id: {
type: String,
default: null,
},
width: {
type: String,
default: '400px',
},
height: {
type: String,
default: '400px',
},
});
const size = reactive({
width: props.width,
height: props.height,
});
const myEcharts = () => {
nextTick(() => {
const chartDom = document.getElementById(props.id);
if (chartDom) {
const myChart = echarts.init(chartDom);
props.option && myChart.setOption(props.option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
});
};
watch(props.option, (newValue, oldValue) => {
myEcharts();
});
</script>
<style></style>