Echarts百度图表

标签: 前端

http://echarts.baidu.com可以在该网址下载echarts.js文件
在使用百度图表的HTML文档中加载下载的echarts.js文件:

<script type="text/javascript" src="js/echarts.js"></script>

html中创建一个容器,并为其设置宽和高

<div id="box"></div>

/*css*/
#box{
width:600px;
height:600px;
border:1px solid #ff5857;
}

自定义一个JS文件,在HTML页面引用

<script type="text/javascript" src="js/index.js"></script>

在自定义js文件中,使用Echarts插件

  • 1、获取box
var boxNode=document.getElementById("box");
  • 2、初始化echarts实例:
var myChart=echarts.init(boxNode)
  • 3、指定图标的配置项和数据:
var option={
…
}; //指定的图表配置项和数据可以放在 JSON 文件中
  • 4、使用配置项和数据显示图表:
myChart.setOption(option);

ECharts组件:图表数据中第一层键名。
1、title:标题组件
2、xAxis:水平轴
3、yAxis:垂直轴
4、legend:图例
5、tooltip:工具提示
6、series:数据系列(数组)
7、color:颜色(数组)

简易柱形图

var boxNode=document.getElementById("box");
var myChart=echarts.init(boxNode);
var option={
	"title":{  //标题组件
		text:"Echarts 入门实例"
	},
	"tooltip":{},  //工具提示
	"legend":{  //图例
		data:["销量","","".....]
	},
	"xAxis":{ //水平轴
		data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	},
	"yAxis":{}, //垂直轴
	"series":[ //数据(数组)
		{
			name:"销量",  //与legend中的data一致
			type:"bar",   //bar-柱形图;pie-饼形图;line-折线图
			data:[10,20,30,40,50,60],
			label:{
                show:true,     //显示图表具体数字
                position:"top"  //显示位置
            }
		},
		{},{}.....
	],
	"color":["","",""....] //颜色
}

在这里插入图片描述

版权声明:本文为F_mengze原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/F_mengze/article/details/105958518