阅读数:115 评论数:0

一、引入方式

1、直接在组件中引用

<script setup>
        import * as echarts from 'echarts'  
</script>

2、全局引入，一般在App.vue

<script setup>
        import * as echarts from 'echarts'  
        provide('echarts',echarts)
</script>

在需要用echarts的组件中用inject获取

<script setup>
        const echarts  = inject('echarts')
</script>

二、使用echarts

1、把获取dom元素和初始化echarts的动作放到onMounted中。

2、提示框组件tooltip自定义背景图像

（1）组tooltip加一个类名，，清除它的padding、border等

（2）通过formatter属性，处理需要展示的数据。

<script setup>
const options = {
  tooltip: {
    // 提示框组件
    trigger: 'axis', // 坐标轴触发，应用于柱状图、折线图
    triggerOn: 'mousemove', // 鼠标移动时触发
    axisPointer: {
      type: 'none',
    },
    className: 'custom-tooltip-box',
    formatter: function (params, elOne, elTwo) {
      console.log(params)
      console.log(elOne)
      console.log(elTwo)
      // 循环处理数据，展示数据
      var htmlText = `<div class='custom-tooltip-style'>显示内容待处理</div>`
      return htmlText
    },
  },
}
</script>

<style scoped lang="scss">
// 给父盒子清除默认已有样式
:deep(.custom-tooltip-box) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    width: 92px;
    height: 171px;
    background-image: url('@/assets/images/echarts/tooltip-bgc.png');
    background-size: cover;
    color: #fff;
  }
}
</style>

3、去掉echarts折线图中的小圆点

series: [{symbol: "none"}]
//设置series下的symbol为none可以直接去除小圆点，并且鼠标放到曲线上也不显示
series: [{showSymbol: false}]
//设置series下的showSymbol为false是去掉小圆点，但是鼠标放到曲线上会显示