click, none, mousemove|clicktriggerOn: `click`, // 鼠标点击的时候触发 如果是mousemove 提示框移动就会变或者消失,不能点击提示框中的网址了//item 图形触发, axis 坐标轴触发, none 不触发trigger: `item`,//浮层隐藏的延迟hideDelay: 1000 * 3,//背景色backgroundColor: `#fff`, ...
triggerOn:"click",//提示框触发的条件 mousemove鼠标移动时触发 click鼠标点击时触发 'mousemove|click'同时鼠标移动和点击时触发//confine: true, //把toolTip限制在图表的区域内className: "areaTool",//hideDelay: 100000, //延时消失时间formatter: (item) =>{this.hookToolTip =item;//经纬度太长需要对位...
最后,通过模板语法将更新图表数据的函数绑定到一个按钮或其他交互元素上: 更新图表数据 当点击按钮时,图表的数据将被更新并重新渲染。这样,你就可以实现图表的数据更新和交互功能了。
热力图 路径图 柱形图 {{ currentJson === ShandongJson ? '切换到青岛市' : '切换到山东省' }} <GeoMap ref="map" :series="currentData" :height="600" :json="currentJson" /> </template> import { onMounted, ref } from 'vue'; import * as echarts from 'echarts'; // 引...
切换图表类型 </template> import echarts from 'echarts'; export default { data() { return { chart: null, chartType: 'line' // 存储当前图表类型 }; }, mounted() { this.initChart(); }, methods: { initChart() { this.chart = echarts...
// triggerOn: 'mouseover', // 触发时机 'mouseover'鼠标移动时触发。 'click'鼠标点击时触发。 'mousemove|click'同时鼠标移动和点击时触发。 // enterable: false, // 鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。
zr:click zr:mousedown zr:mouseup zr:mousewheel zr:dblclick zr:contextmenu See supported eventshere → Native DOM Events As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name withnative:to bind na...
buttonList:"primary",//默认显示表格 buttonChart:"",//默认图形不显示 legendData: ['正向有功实时需量','反向有功实时需量','正向无功实时需量','反向无功实时需量'], tableData: [], } }, methods: { //图表 handleList(){ this.buttonList="primary"; ...
给父组件发送数据 </template> export default { name:'child', methods:{ sendMsg(){ //this.$emit()是向父组件发送数据的函数 //参数1:规定必须父组件使用的事件类型, //参数2: 向父组件发射的数据 //getData: 是父组件指定的传数据绑定的函数,在父组件...
<vue-echarts:option="option"renderer="svg"@click="params => {}"></vue-echarts> 自动轮播 tooltip interval 轮播时间间隔,单位毫秒,默认为 2000 loopSeries boolean 类型,默认为 false。true 表示循环所有 series 的 tooltip,false 则显示指定 seriesIndex 的 tooltip。