Echarts 实现报表功能

当前项目有个报表的模块,之前想用highcharts来实现,但是最近CSDN上了解到百度已经将Echarts开源了,而且还是一个反响不错的开源框架, 借此提议项目组用这框架实现业务的需求.

一. 首先下载echarts.js   在此提供官网的地址 http://echarts.baidu.com/download.html

二. 引入Echarts

     charset="utf-8">
    
     src="echarts.min.js">

三 . 准备一个DOM容器(就是一个div)

    
     id="main" style="width: 600px;height:400px;">

四 .通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

     charset="utf-8">
    
    
     src="Echart/echarts.min.js">  //注意引入js的路径不能错


    
     id="main" style="width: 600px;height:400px;">

type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

五 效果图

这只是一个简单的案例,官网有详细的教程  : http://echarts.baidu.com/index.html