最终效果
说明： 由于页面上的echart图表过多，写一个vue子组件，直接在父页面调取复用
安装插件
npm i echarts在 main.js 中引用
import echarts from 'echarts' Vue.prototype.$echarts = echarts // 全局引用子组件
<template> <el-dialog top="40px" width="50%" :modal="true" :title="title" append-to-body :visible.sync="dialogVisible" :modal-append-to-body="false" :close-on-click-modal="false"> <div id="dialogBox"></div> </el-dialog> </template> <script> export default { data () { return { dialogVisible: false, title: '' } }, methods: { show(title, val, id) { // title：弹出框 标题说明 // val： 父组件中 echart的option数据 // id： 自定义 id this.dialogVisible = true this.title = title this.$nextTick(() => { const divBox = document.getElementById('dialogBox') if (divBox.children && divBox.children.length == 1) { divBox.removeChild(divBox.children[0]) } const divChild = document.createElement('div') divChild.setAttribute('id', id) divBox.appendChild(divChild) const echart = this.$echarts.init(document.getElementById(id)) val.toolbox[0].feature.fullButton.show = false echart.setOption(val) window.addEventListener('resize', () => { echart.resize() }) }) } } } </script> <style> #dialogBox>div { width: 100%; height: 400px; } </style>父组件
<template> <div id="lineEchart" style="height: 400px; widht: 800px;"></div> <echartFull ref="echartFull"/> </template> <script> import echartFull from './echartFull' export default { components: { echartFull }, data() { return { color: ['#DF621E', '#009D4A', '#138AE6', '#C23531', '#2F4554', '#FFBA00', '#49D650', '#61A0A8', '#D48265', '#5860FF'] } } mouthed() { this.lineEchartFn() }, methods: { lineEchartFn() { const lineEchart= this.$echarts.init(document.getElementById('lineEchart')); const option = { color: this.color, tooltip: { trigger: 'axis', backgroundColor: 'rgba(255, 255, 255, .8)', borderWidth: 1, borderColor: '#DF621E', textStyle: { color: '#777' } }, grid: { right: '6%', bottom: '12%', left: '8%', }, legend: { data: ['北京', '上海'] }, toolbox: { show: true, right: 20, feature: { fullButton: { show: true, title: '全屏查看', icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z', onclick: (e) => { this.$refs.echartFull.show('标题', e.getOption(), 'idName') } } } }, xAxis: { type: 'category', data: ['1990', '1991'] }, yAxis: [ { name: '万吨', type: 'value' } ], series: [ { name: '北京', type: 'line', data: [320, 332] }, { name: '上海', type: 'line', data: [320, 332] } ] } lineEchart.setOption(option) window.addEventListener('resize', () => { lineEchart.resize() }) } } } </script>扩展
$nextTick： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（自己理解：当数据更改完成，DOM更新完成，并且实例挂载完成，才会执行此函数） createElement： 创建一个新的 标签元素 setAttribute： 添加指定的属性，并为其赋指定的值。如果这个指定的属性已经存在，则仅设置/更改值 appendChild： 在节点内追加新的子节点 children： 获取节点内有多少个子节点 removeChild： 移除指定的子节点