Echarts 学习笔记

Echarts 统计图表

1、下载并引用Echarts.js库

 <script src="js/echarts.min.js"></script>

2、构建图表容器

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

3、初始化dom数据 （柱状图）

<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  var names = ['Yhsj','Kjos','Ytgs','Polo','Okls','Tgyu'];
  var nums = [298,421,342,465,376,224];

  // 指定图表的配置项和数据
  var option1 = {
       title: {
           text: 'ECharts Project Test!'
       },
       tooltip: {},
       legend: {
           data:['销量']
       },
       xAxis: {
           data: names
       },
       yAxis: {},
       series: [{
           name: '销量',
           type: 'bar',
           data: nums
       }]
   };
   myChart.setOption(option1);
</script>

以上实例为动态模拟的两个数组，若要使用Ajax便使用回调函数去做处理。

效果展示：

4、初始化图表（南丁格尔图）

<div id="main1" style="width: 600px;height:400px;"></div>//构建容器

<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('main1'));//初始化
    var names =['Yhsj','Kjos','Ytgs','Polo','Okls','Tgyu'];//虚拟数据
    var nums =[298,421,342,465,376,224];

    option2 = {
	backgroundColor: '#2c343c',
	visualMap: {
		show: false,
		min: 80,
		max: 600,
	    inRange: {
		colorLightness: [0, 1]
	    }
	},
	series : [
		    {
		        name: '访问来源',
		        type: 'pie',
		        radius: '55%',
		        data:(function(){
		          var res = [];
		            for(var i=0; i<6;i++){
		            	res.push({name:names[i],value:nums[i]});
		            }
		          return res;
		        })(),
		        roseType: 'angle',
		            label: {
		                normal: {
		                    textStyle: {
		                    color: 'rgba(255, 255, 255, 0.3)'
		                }
		            }
		        },
		        labelLine: {
		            normal: {
		                lineStyle: {
		                    color: 'rgba(255, 255, 255, 0.3)'
		                }
		            }
		        },
		        itemStyle: {
		            normal: {
		                color: '#c23531',
		                shadowBlur: 200,
		                shadowColor: 'rgba(0, 0, 0, 0.5)'
		            }
		        }
		   }
		]
	};
</script>

注意：使用刚指定的配置项和数据显示图表。

            myChart1.setOption(option2);

效果图：