1、重点：echart 自定义写组件的时候 id重复
???? <div ref="echart" :style="{'width':'100%','height':heightNum+'px'}"></div>
??? ?
???? this.myChart = echarts.init(this.$refs.echart)
?初始化的时候用这种方法可以避免id重复问题
2、侧边导航折叠展开echart不重绘
??? import { mapState } from 'vuex'
??? ?
??? ?
??? computed: {
??????? ...mapState({
????????? opened: state => state.app.sidebar.opened,
??????? }),
????? },
??? ?
????? watch: {
??????? opened(val){
?????????? setTimeout(() => {
????????????? this.myChart.resize();
?????????? }, 300)
?????? }
????? },
3、完整组件代码
??? <template>
????? <div class="PieWarp">
????????? <div ref="echart" :style="{'width':'100%','height':heightNum+'px'}"></div>
????? </div>
??? </template>
??? ?
??? <script>
??? import echarts from '@/utils/echartsUi'
??? import { mapState } from 'vuex'
??? export default {
????? name: '',
????? data() {
??????? return {
??????????? myChart:null,
??????????? initOpts:{
??????????????? id:'line',
??????????????? options : {
??????????????? }
??????????? }
??????? }
????? },
?????? computed: {
??????? ...mapState({
????????? opened: state => state.app.sidebar.opened,
??????? }),
????? },
????? props: {
????????? heightNum:{
????????????? type:Number,
????????????? default:() => {
????????????????? return 160
????????????? }
????????? },
????????? opt:{
????????????? type:Object,
????????????? default:() => {
????????????????? return {}
????????????? }
????????? },
????? },
????? components:{
????? },
????? watch: {
??????? opt: {
????????? handler(val) {
??????????? if (val && Object.keys(val).length > 0) {
????????????? this.myChart.setOption(val.options)
??????????? }
????????? },
????????? deep: true
??????? },
??????? opened(val){
?????????? setTimeout(() => {
????????????? this.myChart.resize();
?????????? }, 300)
?????? }
????? },
????? created(){
??????? //?? this.initOpts = Object.assign(this.initOpts,this.opt)
????????? this.initOpts = { ...this.opt }
????? },
??????? mounted(){
??????????? this.init()
??????? },
??????? methods: {
??????????? init(){
??????????????? // window.setTimeout(() => {
??????????????????? this.initPieDate0()
??????????????? // },1000)
??????????? },
??????????? // 项目数据
??????????? initPieDate0(){
??????????????? // var chartDom = document.getElementById('gauge1');
??????????????? this.myChart = echarts.init(this.$refs.echart)
??????????????? // this.initOpts.options.series[0].data = this.opt.options.series[0].data
??????????????? window.setTimeout(()=> {
???????????????????? this.myChart.setOption(this.initOpts.options)
??????????????? })
??????????????? if(this.initOpts.resize){
??????????????????? window.addEventListener("resize", () => {
???????????????????????? this.myChart.resize();
??????????????????? })
??????????????? }
??????????? }
????? },
???? }
??? </script>
??? ?
??? <style scoped>
??? </style>
4、参数按照echart组件的传递就可以 （仅供参考）
????????? // 堆叠柱状图
????????? columnarOption: {
????????? id:'columnar',
????????? resize:true,
????????? options : {
??????????? tooltip: {
????????????? trigger: 'axis',
????????????? axisPointer: {
??????????????? type: 'shadow'
????????????? },
????????????? formatter: function(data) {
??????????????? let tip = ''
??????????????? if (data !== null && data.length > 0) {
????????????????? data.forEach(ele => {
??????????????????? tip += ele.seriesName + '  ' + ele.data + '%<br>'
????????????????? })
??????????????? }
??????????????? return tip
????????????? }
??????????? },
??????????? legend: {},
??????????? grid: {
????????????? left: '3%',
????????????? right: '4%',
????????????? bottom: '3%',
????????????? containLabel: true
??????????? },
??????????? xAxis: [
????????????? {
??????????????? type: 'category',
??????????????? axisLabel: {
????????????????? interval: 0,
??????????????? },
??????????????? data: []
????????????? }
??????????? ],
??????????? yAxis: [
????????????? {
??????????????? type: 'value',
??????????????? axisLabel: {
????????????????? formatter: '{value}%'
??????????????? }
????????????? }
??????????? ],
??????????? legend:{
????????????? right: '5%',
??????????? },
??????????? series: [
????????????????? {
??????????????????? name: '1',
??????????????????? type: 'bar',
??????????????????? barWidth: '60%',
??????????????????? color: '#1890ff',
??????????????????? barGap: '-100%',
??????????????????? // barWidth: '30%',
??????????????????? emphasis: {
????????????????????? focus: 'series'
??????????????????? },
??????????????????? data: []
????????????? },
????????????? {
??????????????? name: '2',
??????????????? type: 'bar',
??????????????? barWidth: '60%',
??????????????? color: '#e62679',
??????????????? // barWidth: '30%',
??????????????? emphasis: {
??????????????????? focus: 'series'
????????????????? },
??????????????? label:{
????????????????? show:true,
????????????????? formatter: "{c}%",
??????????????? },
??????????????? data: []
????????????? }
??????????? ],
?????????? }
????????? },
————————————————
版权声明：本文为CSDN博主「小任同学`」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_55969466/article/details/128548807