​首先新建一个盒子，通过ref获取DOM元素，并设置其宽高（一定要加宽高！）

 <div ref="opendoor" style="width: 100%; height: 225px"></div>
创建饼图并修改其样式
      var myChart = echarts.init(this.$refs.opendoor);
      var option;
      option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(74, 144, 226, 0.84)",
        // 右侧的五个小圆球
        legend: {
          orient: "vertical",
          right: 10,
          bottom: 20,
          textStyle: {
            color: "#999",
            padding: [2, 0, 0, 3], // 提示内边距
          icon: "circle", // 形状
          itemWidth: 10,
          itemHegiht: 10,
          selectedMode: false, // 禁用鼠标移动显示效果
        series: [
          // 对饼图以及内容的操作
            name: "开门渠道占比",
            type: "pie",
            left: "-22%",
            top: "3%",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            // center: ["50%", "50%"],
            label: {
              show: false,
              position: "center",
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(16,16,21,0.4)",
            emphasis: {
              label: {
                color: "#4a90e2",
                show: true,
                fontSize: "14",
                lineHeight: 22,
            color: [
              "#60ADCD",
              "#517EDA",
              "#C95C45",
              "#F6BD16",
              "#51BC93",
              "#536382",
            labelLine: {
              show: true,
            data: optionData,
      option && myChart.setOption(option);
   在外层包裹一个函数进行使用
rightBottom() {
      if (userChannelData.code !== 0) return;
      let optionData = [        {value: userChannelData.data.wxMiniOpenCount || 0, name: '小程序开门'},        {value: userChannelData.data.userFaceOpenCount || 0, name: '人脸开门用户'},        {value: userChannelData.data.appOpenCount || 0, name: 'App开门'},        {value: userChannelData.data.aliPayOpenCount || 0, name: '支付宝开门'},        {value: userChannelData.data.otherOpenCount || 0, name: '其他'}      ]
      var myChart = echarts.init(this.$refs.opendoor);
      var option;
      option = {
        tooltip: {  // 提示框样式
          trigger: "item",         
          backgroundColor: "rgba(74, 144, 226, 0.84)",
        // 右侧的五个小圆球
        legend: {
          orient: "vertical",
          right: 10,    // 位置
          bottom: 20,
          textStyle: {
            color: "#999",
            padding: [2, 0, 0, 3], // 提示内边距
          icon: "circle", // 形状
          itemWidth: 10,
          itemHegiht: 10,
          selectedMode: false, // 禁用鼠标移动显示效果
        series: [
          // 对饼图以及内容的操作
            name: "开门渠道占比",
            type: "pie",
            left: "-22%",
            top: "3%",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            // center: ["50%", "50%"],
            label: {
              show: false,
              position: "center",
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(16,16,21,0.4)",
            emphasis: {
              label: {
                color: "#4a90e2",
                show: true,
                fontSize: "14",
                lineHeight: 22,
            color: [
              "#60ADCD",
              "#517EDA",
              "#C95C45",
              "#F6BD16",
              "#51BC93",
              "#536382",
            labelLine: {
              show: true,
            data:optionData ,
      option && myChart.setOption(option);
mounted中调用
  this.rightBottom();// 开门渠道占比
把图表中的data单独拎出来进行百分比装换（里面是模拟的数据结构）
      let optionData = [
        {value: userChannelData.data.wxMiniOpenCount || 0, name: '小程序开门'},
        {value: userChannelData.data.userFaceOpenCount || 0, name: '人脸开门用户'},
        {value: userChannelData.data.appOpenCount || 0, name: 'App开门'},
        {value: userChannelData.data.aliPayOpenCount || 0, name: '支付宝开门'},
        {value: userChannelData.data.otherOpenCount || 0, name: '其他'}
结构如下：
 tooltip中的formatter属性（提示框设置）
内容如下给出解释：
tooltip : {
    formatter:  '{a} <br/>{b}: {c} ({d}%)',//默认值null，内容格式器
            //折线（区域）图、柱状（条形）图、K线图 : a（系列名称），b（类目值），c（数值）, d（无）
            //散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
            //地图 : a（系列名称），b（区域名称），c（合并数值）, d（无）
            //饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
效果如下： 
鼠标旋移中间的样式如下：
            emphasis: {
              label: {
                color: "#4a90e2",
                show: true,
                fontSize: "14",
                lineHeight: 22,
                formatter: '{d}% \n {b}'    //这个意思大概就是上层是百分比下层是名称
 原先官网给出的图
修改之后的效果：
加个自动的时间戳详情见自动轮播提示框
​
  
分类：
 前端
 
标签：
 
前端
 
  
     
 

    NanChen_042
        前端开发 @ 南辰