饼图，折线，柱状图画法_在线 饼图 折线

<title>ECharts</title>  
<script src="E:/echarts静态图表/echarts.js"></script>
<script src="E:/echarts静态图表/echarts.min.js"></script>
1
2
3

<div id="bookinfoid"
	style="width: 650px; height: 250px; border: 1px solid #dddddd; margin: 10px 30px;">
</div>
	
	
<div id="main"
	style="width: 650px; height: 250px; border: 1px solid #dddddd; margin: 10px 30px;">
</div>
1
2
3
4
5
6
7
8

<script type="text/javascript">

	var myChart = echarts.init(document.getElementById('legend'));
	var option={
	 title: {  
            text: '图书信息折线图'  
        }, 
		tooltip : {
			trigger : 'axis'
		},
		//图例配置  
		legend : {
			data : ['图书数量'],
			y : "bottom"
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'line', 'bar', 'stack', 'tiled','pie' ]
				},
				restore : {
					show : true
				},   
				saveAsImage : {
					show : true
				}
			
			}
		},
		calculable : true,
		//轴配置  
		xAxis : [ {
			type : 'category',
			data:['文学', '名著', '小说', '杂志', '童话'],
			name : "图书类型"
		} ],
		yAxis : [ {
			
			type : 'category',
			axisLine : {
				onZero : false
			},
			axisLabel : {
				formatter : '{value} 本' 
			},
			boundaryGap : false,
			data : ['0','1','2','3','4','5','6','7'],
			name : ""
		} ],
	
		series : [{
			name : '访问来源',
				type : 'line',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : [1,6,2,4,5]
		}]
	};
	myChart.setOption(option);  
</script>

<script type="text/javascript">  
    // 基于准备好的dom，初始化echarts实例  
    var myChart = echarts.init(document.getElementById('main'));  

    // 指定图表的配置项和数据  
    var option = {  
        title: {  
            text: '图书信息柱状图'  
        },  
        tooltip: {},  
        legend: {  
            data:['销量']  
        },  
        xAxis: {  
            data:['文学', '名著', '小说', '杂志', '童话']  
        },  
        yAxis: {},  
        series: [{  
            name: '销量',  
            type: 'bar',  
            data: [5, 20, 36, 10, 10]  
        }]  
    };  

    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);  
</script>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97