Angular2中echarts的使用（饼图）

最新推荐文章于 2021-10-22 10:41:13 发布

Z and ABB

最新推荐文章于 2021-10-22 10:41:13 发布

阅读量993

点赞数

本文链接：https://blog.csdn.net/weixin_43927849/article/details/107337470

版权

本文介绍了如何在Angular2应用中使用ECharts库创建饼图。通过echarts初始化和在Angular组件中引入相关代码，展示了ECharts在前端数据可视化的应用。详细配置项可参考ECharts官方文档。

摘要由CSDN通过智能技术生成

ECharts (以饼图为例)

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

echarts初始化

echarts. init
Function

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
   
    devicePixelRatio?: number,
    renderer?: string,
    width?: number|string,
    height?: number|string
}) => ECharts

在Angular2中引入echarts：

echarts-test.component.html

 <div id="chart" #chart></div>

echarts-test.component.ts

// 引入echarts
import echarts from 'echarts/lib/echarts';

// 引入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legend/scrollableLegendAction';
import 'echarts/lib/component/legend/ScrollableLegendModel';
import 'echarts/lib/component/legend/ScrollableLegendView';
import 'echarts/lib/component/title';
import 'echarts/lib/component/toolbox';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';

@Component({
   
  selector: 'echarts-test',
  templateUrl: './echarts-test.component.html'
})

export class EchartsTestComponent {
   
  @ViewChild('chart') chartDiv: ElementRef; // 通过临时模板变量为Echarts准备一个Dom

  constructor(
  ) {
   
  }

 // 数字格式化
 toThousands(value: any, n: number = 0) {
   
    if (typeof value !== 'number') {
   
      return n ==