您现在的位置是:网站首页> 编程资料编程资料
vue3 ts编写echart是tooltip无法展示的解决_vue.js_
2023-05-24
705人已围观
简介 vue3 ts编写echart是tooltip无法展示的解决_vue.js_
vue3 ts编写echart是tooltip无法展示
用ts 定义的一个ref 初始化ehart实例
tooltip参考网上的写法 改了很多次 页面还是不能展示
tooltip片段代码如下
tooltip: { show: true, trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line', // 默认为直线,可选为:'line' | 'shadow' lineStyle: { color: '#57617B' } }, formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%', backgroundColor: 'rgba(0,0,0,0.7)', // 背景 padding: [8, 10], // 内边距 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);' // 添加阴影 },echarts社区都可以展示怎么到这里就这样了
强大的百度
解决办法
用 markRaw 让echarts从监听对象变成普通对象!!
myEhart.value = markRaw(echarts.init(cyEchartRef.value)) myEhart.value.setOption(echartOption) // myEhart.off('click') myEhart.value.on('click', function(params) { fetchDataFun(params.value) getLight(params.value) })可以成功展示啦~
vue对echarts的tooltip自定义内容
先看一下后端返回的数据结构
change: { date: { date_x: ["2020-11-12"], date_y: [10], date_describe: [5] } } tooltip 格式化后显示效果

格式化代码部分:
drawPass(){ // 基于准备好的dom,初始化echarts实例 let ref = this.$refs.pass let discrible = this.pwd_data_describe if (ref && ref !== undefined) { let myChart = this.$echarts.init(ref) // 绘制图表 myChart.setOption({ tooltip: { show: true, formatter: function (param) { console.log(param) return param.name + '
' + param.value + '
描述:距上一次修改天数为 ' + discrible[param.seriesIndex] } }, xAxis: { type: 'category', data: this.pwd_data_x, }, yAxis: { type: 'value' }, series: [{ data: this.pwd_data_y, type: 'line', symbol: 'triangle', symbolSize: 20, lineStyle: { color: '#cc302e', width: 4, type: 'dashed' }, itemStyle: { borderWidth: 3, borderColor: '#ff6f6c', color: '#ff9392' } }] }) } }, 以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- vue3.0 setup中使用vue-router问题_vue.js_
- uniapp使用v-loading并且不引入element-ui的操作方法_vue.js_
- Vue打印错误日志问题_vue.js_
- vue-resource 获取本地json数据404问题的解决_vue.js_
- 前端需知nodejs express中间件使用及定义详解_node.js_
- Vue树表格分页的实现方法详解_vue.js_
- vue3组件库Shake抖动组件搭建过程详解_vue.js_
- vue项目如何引入json数据_vue.js_
- vue element table表格相同名称列合并方式_vue.js_
- Vue数据增删改查与表单验证的实现流程介绍_vue.js_
