echarts统计图日常小结

1.如何设置legend

legend: {
     icon: 'circle', //类型样式 圆圈
     bottom: 10,
     itemGap: 10,
     //   align: 'right',
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
     // width: '240px', //不设置自动分配
     textStyle: {
         color: '#DFDFDF',
           fontSize: 10
     }
  }

2、echarts支持的鼠标事件类型：click、dbclick、mousedown、mouseover、mouseup、mouseover、mouseout、globalout（鼠标移出坐标系触发）、contextmenu（右键事件）

mYchart.dispatchAction({ // 高亮当前图形
    type:'highlight', // type: 'showTip' //提示框样式高亮
    seriesIndex:0,
    dataIndex:app.currentIndex
})

3、给charts添加背景图（默认只有背景色可设置）

var img = new Image()
    img.src='base64图片' // https://tool.chinaz.com/tools/base64.aspx(站长之家工具转换）
    img.width=this.height*0.4
    img.height=this.height*0.4
    img.style.display = 'block'
    img.style.width = this.height*0.4+'px'
    img.style.height = this.height*0.4+'px'
 var option = {
           backgroundColor:{
               image:img // 引入图片即可
         },
     }

4、echarts环形图 引导线样式如何设置

// 系列列表
 series: [{
       name: '圆环图系列名称',         // 系列名称
       type: 'pie',                    // 系列类型
       center:['50%','50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
       radius: ['45%', '55%'],// 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]  最好按照百分比设置  相对于容器大小  不写百分数 为实际像素大小自适应不好
       hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
       color: colors,                   // 圆环图的颜色
       labelLine:{//标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
            normal: {
               show: true,    // 是否显示视觉引导线。
               length: 6,     // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
               length2: 4,            // 视觉引导项第二段的长度。
               // minTurnAngle:30,
               lineStyle: {            // 视觉引导线的样式
                   //color: '#000',
                   //width: 1
               }
            }
        },
        label: {   // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
             normal: {
             show: true,  // 是否显示标签[ default: false ]
             position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
             // formatter: '{b} : {c}',  // 标签内容
             formatter: '{c}',  // 标签内容
                textStyle:{ // 只有position设置为'outside'才能生效
                    rich:{ // 设置引导线文字样式
                        a:{
                           fontSize: 12,
                           lineHeight: 20,
                           color: '#fff'
                          },
                        b:{
                           fontSize: 12,
                           lineHeight: 20,
                           color: '#fff'
                          },
                        c:{
                           fontSize: 12,
                           lineHeight: 20,
                           color: '#ffffff'
                          }
                         },
                          // 以上a,b,c不生效的时候设置下边的可直接修改
                         fontSize:10, 
                         color:'#fff'
                         }
                  }
               },
         data: this.data                      // 系列中的数据内容数组。
     }]

5、echarts添加下载或者保存为图片功能

var option = { 
    toolbox: { // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
       feature: {
          saveAsImage: {}  // 保存为图片按钮开放
           }
      }
}