标签：false dataList myChart echarts 使用 Angular type any

安装

npm install echarts --save
npm install @types/echarts --save

基本使用

定义一个dom

<div id="chart" style="min-width: 1500px;min-height:800px;"></div>

定义对象

//数据
eChartDatas: any;
//图例
legends:any;

//echart
echarts: any;
myChart: any;

获得echarts对象

// 基于准备好的dom，初始化echarts实例
this.echarts = require('echarts');
//只能初始化一次:https://www.echartsjs.com/api.html#echarts.init
if (this.myChart == null || this.myChart == undefined) {
  this.myChart = this.echarts.init(document.getElementById('chart') as HTMLDivElement);
}

多折线图生成

//绘制chart
// 指定图表的配置项和数据
var option = {
    //标题
    title: {
    text: '监测数据统计图',
    // left: 'center'
    },
    //图例
    legend: {
        data: this.legends
    },
    tooltip: {
    trigger: 'axis',
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    toolbox: {
    feature: {
        saveAsImage: {}
    }
    },
    xAxis: {
    type: 'time',
    splitLine: {
        show: false
    }
    },
    yAxis: {
    type: 'value',
    splitLine: {
        show: false
    }
    },
    series: []
};
//循环录入数据
this.eChartDatas.forEach(dataList => {
    option.series.push({
    name: dataList[0].tip,
    type: 'line',
    showSymbol: false,
    hoverAnimation: false,
    data: dataList
    });
});

// 使用刚指定的配置项和数据显示图表。
this.myChart.clear();
this.myChart.setOption(option);

示例代码

示例代码

参考资料

Is it possible to use ECharts Baidu with Angular 2 and TypeScript
Ionic2系列——在Ionic2中使用ECharts
echarts demo
echarts 多折线demo

标签：false,dataList,myChart,echarts,使用,Angular,type,any
来源： https://www.cnblogs.com/Lulus/p/10662093.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。