使用echarts实现图表项目的注意点

 1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
 <script src="assets/js/echarts.min.js"></script>

 2.在组件的.html文件中
 <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

 3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

 grid:{
 top:...
 left:...
 bottom:...
 right:...
 }
 
 legend:{
 top:...
 left:...
 ...
 }

tooltip:{
 formatter: params => { //自定义hover状态数据显示的情况
 let str = '';
 str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
 params.forEach(item => {
 str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
 //item中提供了图标、颜色等
 });
 return str;
 }
 }
 
 legend:{
 formatter: (name) => { //需要根据值去重算数据然后显示的情况
 let source = data.source[name.toUpperCase()];
 var total = 0;
 source.forEach(element => {
 total += element;
 });

 return name + ': ' + Math.round(total).toLocaleString();
 }
 }

dataZoom:[
 {
 type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
 ...
 },
 {
 type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
 ...
 }
]

series:{
 type:'line'/'pie'/'bar'/'treemap',
 ...
}