echarts实用小解

1、主题样式

例如引入walden, 使用只需在初始化中加入:
const chart=echarts.init (document.getElementById('chart1','walden') );

2、异步请求数据

fetch('./data.json')
.then( res => res.json() ) //将数据解析成json
.then( data => {
  option.dataset.source = data;
  chart.setOption( option );  
})

3、设置行列映射

series:{
  encode:{
    x:1,
    y:0  
  }
}

4、饼图绘制

series:{
    type: pie,
    center: ['50%', '60%'], //圆心位
    roseType: 'radius', //玫瑰图突显差异    
    radius:['40%','70%'], //给一个圆环(内、外值)
},
dataset: {datasource}, //数据源
//鼠标放上去显示效果设置:
tooltip:{
  formatter: '{d}%' ,//a:系列名; b:数值项名; c:数值; d:百分比
  // 回调函数写法:
  formatter(param)=>{ //param为实际数据  },
  //formatter解构, 如格式化百分比:
  formatter({percent})=>{
     return Math.round(percent)+'%';
  }
}

5、散点图

series:{
  type:'scatter',
  symbolSize: 3, //散点大小
  itemStyle:{ //散点密集度
    opacity: .5,
  }
}

6、雷达图

更有效的将两组以上数据差异对比显示

//option配置外定义
const indicator=[
  //添加min、max可以避免数据与边界太紧密
  {name: '数据项一' , min: 0 , max: **},  // max取值要大于data中最大值
  {name: '数据项二' , min: 0 , max: **}, 
  {name: '数据项三' , min: 0 , max: **}
];
//option内的配置:
radar:{
  indicator //指示器
},
series:{
  type:'radar',
  data //数据源
}

7、柱状图

grid:{ //绘图区
 top:72,
 bottom:28,
},
xAxis:{ type: 'category' }, //类目轴
yAxis:{ type: 'value' }, //数值轴 
series:[
 {
   id: 'id1', 
   type: 'bar',
 },
//...重复对象
]

//自定义背景图: 在option配置外 对图像源处理

 const img1 = new Image();
 img1.src=' ./images/data1.jpg';
//...重复图片
//当所有图片都加载成功后绘图:
Promise.all ([imgPro(img1), ...]).then( ()=>{
  chart.setOption({
    series:[
      { id : 'id1', // id与option中series相对应 
        color: { image: img1 }
      },
      //...重复项
    ]
  })
} );
//建立promise对象, 指定img加载成功后, 执行resolve
function imgPro(img){
  return new Promise((resolve)=>{
    img.onLoad=function(){
      resolve(img);
    }
  })
}

8、图例配置

legend:{
  data:['图例一',‘图例二’],
  left:'left',
  top:30, //数值方向均可
  orient: 'vertical', //默认横向改为纵向排列
}

antV-g2可视化图形语法， 封装优化了echarts