vue使用 echarts总结

第一步先试用echarts.init()方法:
在获取dom元素后 可以通过echarts.init() 创建echar实例

因为echarts里需要使用dom来挂载画布,我通过 ref 获取dom节点(ref是在dom渲染完成之后才有的) 所以在使用echarts时要在生命周期mounted(){}钩子中调用 或者使用this.$nextTick(()=>{})中调用(它会在dom更新之后立即执行回调函数)

第二步 使用 echarts.setOption({ }) 方法 里面可以修改echart的部分配置 如下

当这些配置完成之后 效果就出来了

现在简单的图标出来了 但对于开发中的需求远远不够
下一步
echarts标题 在setOption 里面使用title:{} 补充:X轴和Y轴标题 在xAxis yAxis中添加name:“名字”

效果:

• 缩放功能: (可以通过鼠标滚轮对echarts图进行放大和缩小)
  在setOption 中添加

   dataZoom: [
        {
          type: 'inside'
        }
      ],
  

  • 坐标指示器 当鼠标经过会展示该坐标的数据
    在setOption中添加

  tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "line" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
  

  +
  • echarts 下载echarts图表
    在setOption中 添加

   toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
  

  效果：
  
  
  x轴y轴都可以设置

   axisPointer: {
          value: '2016-10-7',
          snap: false,
          lineStyle: {
              color: '#004E52',
              opacity: 0.5,
              width: 2
          },
          handle: {
              show: true,
              color: '#004E52'
          }
      },
  

  可以console出各位置的值

    tooltip: {
          triggerOn: 'none',
          
        formatter: params => {
          return'a'
          console.log(params);
        }
      },
  

  设置图表的位置

  grid:{
  x:坐标轴左边与边框的距离
  y:坐标轴顶端与边框的距离
  x2:坐标轴右边与边框的距离
  y2:坐标轴底端与边框的距离
  }
  

echarts铺满整个div

grid:{

top:"50px",

left:"5px",

right:"5px",

bottom:"50px",

backgroundColor: '#fff',

width:"auto", //图例宽度

height:"100%", //图例高度

},

• 饼图
• 
  线长

 labelLine: {
              show: true,
              length: 0.001,
              normal: {
                length: 2,
              },
            },

取消鼠标放上饼图放大

   hoverAnimation: false,