ECharts使用_小记

最新推荐文章于 2024-07-31 00:24:58 发布

偶尔会发笑

最新推荐文章于 2024-07-31 00:24:58 发布

阅读量245

点赞数 1

分类专栏：前端文章标签： echarts

本文链接：https://blog.csdn.net/niuniuyaobuyao/article/details/79411796

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

-------------------准备-----------------------------------------------------

1. echarts 官网参考：http://echarts.baidu.com/examples/

2. 页面记得引用js：<script src="static/js/plugins/echarts/v3/echarts.min.js"></script>

-------------------使用----------------------------------------------------------------

写个DIV Id赋为‘div_echarts1’

将去网站找到的实例里左侧的代码粘到js文件里叫option1

js代码绑定下:

$(document).ready(function() {
	var myChart1 = echarts.init(document.getElementById("ndjet1"));
	myChart1.setOption(option1);
});

Ok，就是这样了，，，

绑定数据源的时候，一定要用数组

一些大致可能用到的解释----------------------------------------------------------------------

var ChartesCss = {

	// color:['#4184f1', '#feb900','#38a99d','#f06703','#6abe7d'], //颜色
	color: ['#4184f1', '#F4A13F', '#3ED3C3', '#FF4564', '#589B63'],
	symbolSize: 8, //折线图圈大小
	legendtextStyle: { //头部文字样式
		fontWeight: "bold",
		fontSize: 14
	},
	XYisLabel: { //X Y 文字样式
		textStyle: {
			fontSize: 13,
			fontWeight: "bold",
		}
	},
	XYisLine: { //X Y 轴的粗细
		lineStyle: {
			width: 2
		}
	},
	LineStyle: { //折线图宽度
		normal: {
			width: 3,
			show: true,
		}
	},
}