Echarts用法

兼容ie8，echarts因为在官网下载的现成的包都不兼容ie8所以是到官网在线定制的兼容ie8（需要勾选兼容ie8选项）的包，只有简单的饼状图，柱状图，折线图。
代码
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6         <title>Echarts</title>
  7         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8         <script src="js/echarts.min.js"></script>
  9         
 10         <!-- 在ie8中兼容bootstrap -->
 11         <!--[if lte IE 9]>
 12             <script src="js/respond.min.js"></script>
 13             <script src="js/html5.min.js"></script>
 14             <script src="js/PIE.js"></script>
 15         <![endif]-->
 16         <style type="text/css">
 17             #bar,#pie{
 18                 height: 500px;
 19             }
 20             .m-top{
 21                 margin-top: 20px;
 22             }
 23         </style>
 24     </head>
 25     <body>
 26         <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 27         <div class="container">
 28             <div class="row m-top">
 29                 <div id="bar" class="col-md-6"></div>
 30                 <div id="pie" class="col-md-6"></div>
 31             </div>
 32             <!--<div style=" 500px;height:400px;"></div>
 33             <div id="pie" style=" 700px;height:400px;"></div>-->
 34         </div>
 35         
 36         
 37         <script type="text/javascript">
 38             // 基于准备好的dom，初始化echarts实例
 39             var barChart = echarts.init(document.getElementById('bar'));
 40             var pieChart = echarts.init(document.getElementById('pie'));
 41     
 42             // 指定柱状图表的配置项和数据
 43             var option = {
 44                 title: {
 45                     text: '交易金额柱状图',
 46                     // padding:[5,10]
 47                 },
 48                 tooltip: {},
 49                 legend: {
 50                     // type:'plain',
 51                     data:['销量'],
 52                 },
 53                 xAxis: {
 54                     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] // X轴数据
 55                 },
 56                 yAxis: {
 57                     // splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
 58                 },
 59                 series: [{
 60                     name: '销量',
 61                     type: 'bar',
 62                     data: [5, 20, 36, 10, 10, 20]
 63                 }],
 64                 itemStyle: {
 65                     normal: {
 66                         // 设置柱子的颜色
 67                         //  color:['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622']
 68                         color: function (params){ // 设置各数据颜色
 69                             var colorList = ['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622'];
 70                             return colorList[params.dataIndex];
 71                         }
 72                     },
 73                     //鼠标悬停时：
 74                     emphasis: {
 75                         shadowBlur: 10,
 76                         shadowOffsetX: 0,
 77                         shadowColor: 'rgba(0, 0, 0, 0.5)'
 78                     }
 79                 }
 80             };
 81     
 82             var option2 = {
 83                 title: {
 84                     text: '交易手续费',
 85                     left: 'center'
 86                 },
 87                 tooltip : {
 88                     trigger: 'item',
 89                     formatter: "{a} <br/>{b} : {c} ({d}%)"
 90                 },
 91                 legend: {
 92                     // orient: 'vertical',
 93                     // top: 'middle',
 94                     bottom: 10,
 95                     left: 'center',
 96                     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 97                 },
 98                 series : [
 99                     {
100                         name:'销量',
101                         type: 'pie',
102                         radius : '65%',
103                         center: ['50%', '50%'],
104                         selectedMode: 'single',
105                         data:[
106                             {value:5,name: '衬衫'},
107                             {value:20, name: '羊毛衫'},
108                             {value:36, name: '雪纺衫'},
109                             {value:10, name: '裤子'},
110                             {value:10, name: '高跟鞋'},
111                             {value:20, name: '袜子'}
112                         ],
113                         itemStyle: {
114                             normal: {
115                                 // 设置扇形的颜色
116                                 //  color:['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622']
117                                 color: function (params){
118                                     var colorList = ['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622'];
119                                     return colorList[params.dataIndex];
120                                 }
121                             },
122                             emphasis: {
123                                 shadowBlur: 10,
124                                 shadowOffsetX: 0,
125                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
126                             }
127                         }
128                     }
129                 ]
130             };
131             // 使用指定的配置项和数据显示图表。
132             barChart.setOption(option);
133             pieChart.setOption(option2);
134         </script>
135     </body>
136 </html>