Angular开发(二十六)-angular集合百度图表开发

xiaoxiao2021-02-28  65

在angular中使用百度图表主要步骤

1、安装依赖包npm install --save echarts ng2-echarts

2、在angular-cli.json中配置

"scripts": [ "../node_modules/echarts/dist/echarts.min.js" ],

3、在app.module.ts中配置

import { Ng2Echarts } from 'ng2-echarts'; ... declarations: [ Ng2Echarts ] ...

4、在相关的组件中写上百度图表官方demo代码

public chartData = { theme: '', event: [ { type: "click", cb: function (res) { console.log(res); } } ], title: { text: '某站点用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [{ name: '访问来源', type: 'pie', startAngle: -180, radius: '55%', center: ['50%', '60%'], data: [{ value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' }], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] };5、在组件的html代码中写上 <div [ng2-echarts]="chartData" style="height: 300px; width: 500px;"></div>
转载请注明原文地址: https://www.6miu.com/read-47344.html

最新回复(0)