echarts使用

最新推荐文章于 2024-10-04 08:00:00 发布

huashanlunjian

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量120

点赞数

分类专栏： WEB前端文章标签： echarts 后台取值 ajax

本文链接：https://blog.csdn.net/huashanlunjian/article/details/84724009

版权

WEB前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
     
    <div id="main" style="height:400px"></div>
     
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
		myChart();
		
				
			function myChart() {
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById('main')); 
     
				var categories = new Array();
				var data = new Array(); 
				//此处值可以从后台取，如 categories = ${category};
				categories = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
				data = [5, 20, 40, 10, 10, 20];
	
                var option = {
                    tooltip: {
                        show: true
                    },
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
					   //   dataView : {show: true, readOnly: false},
							magicType : {show: true, type: ['line', 'bar']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : categories
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data": data
                        }
                    ]
                };
				
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
			
			//ajax设置图表
			function changeChart(){
				$.ajax({
					url:url,
					dataType:"json",
					success:function(data){
						var newOption = myChart.getOption(); // 深拷贝  
						newOption.xAxis[0].data = [];  
						newOption.series[0].data = [];  
						myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并
					);
				});
			}
        	
    </script>
</body>

上面展示了从后台取值和从ajax改变图表的方式，旧版本，如果数据为空会报错，新版就不会