饼图，折线，柱状图画法

最新推荐文章于 2021-09-01 16:12:18 发布

ernesto_ji

最新推荐文章于 2021-09-01 16:12:18 发布

阅读量229

点赞数 1

分类专栏： # echarts 文章标签：饼图，折线，柱状图画法

本文链接：https://blog.csdn.net/qq_38407462/article/details/90168269

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<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>

<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>