vue echarts使用总结

option = {
  tooltip: {//提示框组件，也就是我们平时经常看见的鼠标移入后会有一个框框，显示你当前移入的参数名称和数据
    trigger: 'item'//设置触发类型 'item'数据项触发主要是散点图，饼图/ 'axis'坐标轴触发主要就是柱状图，折线图 /'none'不触发
  },
  legend: {//图例组件，我理解的就是旁边那个文字
    orient: 'vertical',//布局朝向这个是竖着排 'horizontal'就是横着排
    bottom: '0',//距离容器的距离
    left: 'right',//整个图例的位置
    align: 'left',//这个可以设置图例标记相对于文字的位置
    formatter: function (name) {//这个函数就是为了满足图例上也可以看到数据是多少写出来的
      // 获取legend显示内容
      let data = option.series[0].data;
      let total = 0;
      let tarValue = 0;
      for (let i = 0, l = data.length; i < l; i++) {
        total += data[i].value;
        if (data[i].name == name) {
          if (data[i].name.length > 4) {
            name = name.slice(0, 4) + '...';
          }
          tarValue = data[i].value;
        }
      }
      let p = ((tarValue / total) * 100).toFixed(0);
      return p + '%' + '  ' + name;
    },
    data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads']
  },

  grid: {
    top: '8%',
    left: '-30%',
    right: '10%',
    bottom: '10%'
  },
  series: [//相当于图案本体了，也就是饼图这个里面设置的就是这个饼的样子
    {
      name: 'Access From',
      type: 'pie',
      center: ['25%', '50%'],//可以设置图案的在容器的位置
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center',
        fontSize: 12
      },
      emphasis: {
        label: {//这个是我这个圆环中心文字的样式

          show: true,
          fontSize: '12',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

此条用于记录，自己对部分使用echarts时的部分总结

标签：总结,vue,name,value,图例,let,data,echarts,Ads
来源： https://www.cnblogs.com/Old-vegetable-chicken/p/15507860.html