使用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',    ...}