公司部门章有没有法律效力_深圳做网站的公司哪家最好_昆明网络推广优化_公司网站建设平台

function.js文件中定义

/*** echarts图显示轴坐标label的tooltip，优化标签过长显示不全的问题* option的yAxis/xAxis中必须设置属性 triggerEvent: true* @param charts echarts实例数组* @param axis 需要开启的坐标类型['xAxis', 'yAxis']*/
export function chartExtension(charts, axis = ['xAxis', 'yAxis']) {const id = document.getElementById("chart-extension");if (!id) {let div = document.createElement('div')div.setAttribute('id', 'chart-extension')div.style.display = 'block'document.querySelector('html').appendChild(div)}charts.forEach(chart => {chart.on('mouseover', function (params) {if (axis.includes(params.componentType)) {const elementDiv = document.querySelector('#chart-extension')const elementStyle = 'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'elementDiv.style.cssText = elementStyleelementDiv.innerHTML = params.valuedocument.querySelector('html').onmousemove = function (event) {const elementDiv = document.querySelector('#chart-extension')const xx = event.pageX + 20const yy = event.pageY - 15elementDiv.style.top = yy + 'px'elementDiv.style.left = xx + 'px'}}})chart.on('mouseout', function (params) {if (axis.includes(params.componentType)) {const elementDiv = document.querySelector('#chart-extension')elementDiv.style.cssText = 'display: none'}})})
}

main.js中引入

import { chartExtension } from "@/utils/function.js";
Vue.prototype.$chartExtension = chartExtension;

相关vue组件中的echarts实例调用

vue-charts:

<chartref="chart":options="option"autoresizestyle="height:290px;background:#ffffff"/>

echarts:

<div ref="echart2" style="width: 600px; height: 400px;"></div>	

使用：

data() {return {option: {...}, // option的yAxis/xAxis中必须设置属性 triggerEvent: trueechart2Option: {...}}
}	
mounted() {
// 初始化echart2的实例
this.echarts2Instance = echarts.init(this.$refs.echart2)
this.echarts2Instance.setOption(this.echart2Option)
this.$nextTick(() => {this.$chartExtension([this.$refs.chart.chart,this.$refs.echart2.chart], ['yAxis'])})
}