echarts使用 - 技术栈

uniapp中，tooltip提示框失效

问题原因： uniapp中的wx变量污染了echarts中的wx变量

引用：https://blog.csdn.net/y1059477028/article/details/132105371

echarts 样式

x轴：

js 复制代码

    xAxis: {
            type:"category",
            data: ['15天', '1个月', '3个月', '6个月', '12个月'],
            axisLabel:{//文本颜色
              color: "#9AA5B5",
              fontSize: "24rpx"
            },
            axisTick:{// 是否显示刻度
              show:false
            }
          },

y轴：

js 复制代码

  yAxis:{
            type:"value",
            interval:5,//间隔
            splitLine:{// y在echarts上的线
              show:false
            }
          },

柱状图：

js 复制代码

 series: [{
            type: "bar", //形状为柱状图
            data: [3, 4, 5, 6, 8],
            stack:"总申请数",// 堆叠
            name: "申请次数", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: false,
              position: "top"
            },
            itemStyle:{
              color:"#62D7CC" // 柱状图颜色
            },
            barWidth:10 // 柱子宽度
          },
          ]

饼图：

js 复制代码

{
          name: '访问来源',
          type: 'pie',
          roseType: 'area',
          radius: ['50%', '90%'],  // 设置内外半径，实现环形
          center: ['20%', '50%'], // 饼图中心位置
          avoidLabelOverlap: false,
          label: {
            show: false,  // 隐藏标签
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }

legend样式：

js 复制代码

     legend:{
            data:["申请次数","申请机构数"],
            top:"32",
            left:"68",
            itemWidth:6, // 方块宽高
            itemHeight:6,
            textStyle:{ // 文字样式
              fontWeight:"normal",
              color:"#9AA5B5",
              fontsize:"24rpx"
            }
          },

// 自定义legend
  legend: {
          // data:["申请次数","申请机构数"],
          top: "50",
          // left:"68",
          orient: 'horizontal',// 水平
          left: 'right',
          itemGap: 20, // legend间隔
          width: "50%", // legend占了整个echarts的50%
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            fontWeight: "normal",
            color: "#9AA5B5",
            fontsize: "24rpx"
          },
          formatter: function (name) { // 自定义legend
            var find = data.find(item => item.name === name);
            if (find) {
              return `${name}:${find.value}`
            }
            return `${name}`
          }
        },

tooltip:

js 复制代码

    tooltip: {
            trigger: 'axis', // 触发类型，可选 'item' 和 'axis'
            axisPointer: { // 坐标轴指示器配置
              type: 'shadow' // 默认为 'line'，可选 'line' | 'shadow'
            }
          },
// 自定义tooltip
  tooltip:{
            trigger: "item",
            formatter: function (params) {
              // return `Series: ${params.name}<br/>Category: ${params.value}<br/>Value: ${params.value}`;
              let rate = ((params.value/sum)*100).toFixed(2)+"%"
              return rate
            }
          },

title:

js 复制代码

   title:{
            text:"消费申请走势",
            textStyle:{
              fontWeight:"normal",
              color:"#001850",
              fontsize:"28rpx"
            }
          },

js 复制代码

 window.addEventListener("resize",()=>{
          echart01.resize()
        })