echarts柱状图显示

1.div代码如下,

<div class="col-xs-12 col-sm-12 col-md-12">
	<div id="main3" style="width:700px;height:450px;display: none"></div>
        <img src=""  id="img3"  style="width: 100%;height: 450px" >
</div>

2.ajax请求根据数据作柱状图,js代码如下,

        var data_x_3 = [];
		var data_y_3 = [];
		Common.ajaxRestRequest({
			url: "",
			data: {
				"beginDate": $("#beginDate", getElementContext()).val(),
				"endDate": $("#endDate", getElementContext()).val()
			},
			type: 'GET',
			async: false,
			sucessCallBack: function (data) {
			debugger;
				for (var i = 0; i < data.length; i++) {
					var obj = new Object();
					obj.name = data[i].date;
					obj.value = data[i].order_count;
					data_x_3[i] = obj.name;
					data_y_3[i] = obj.value;
				}
			}
		});

		var myChart3 = echarts.init(document.getElementById('main3'));

		$('#main3', container).width($('#main3', container).width());
		$('#main3', container).height($('#main3', container).height());

		var option3 = {
			color: ['#3398DB'],
			title: {
				text: '测试',
				x: 'center',
				textStyle: {
					//文字颜色
					color: 'blue',
					//字体风格,'normal','italic','oblique'
					fontStyle: 'normal',
					//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
					fontWeight: 'bold',
					//字体系列
					fontFamily: 'sans-serif',
					//字体大小
					fontSize: 14
				}
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器,坐标轴触发有效
					type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					data: data_x_3,
					axisTick: {
						alignWithLabel: true
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					minInterval: 1
				}
			],
			series: [
				{
					name: '',
					type: 'bar',
					barWidth: '60%',
					data: data_y_3
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart3.setOption(option3);
		setTimeout(function () {
			var baseCanvas3 = $("#main3").find("canvas")[0];
			document.getElementById('img3').src = baseCanvas3.toDataURL();
		}, 1000);

3.效果图如下,

发布了125 篇原创文章 · 获赞 27 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/weixin_39428938/article/details/98487322