ECHATS入门

最新推荐文章于 2024-03-31 04:46:57 发布

kikpin

最新推荐文章于 2024-03-31 04:46:57 发布

阅读量162

点赞数

分类专栏：图表动画文章标签： echarts

本文链接：https://blog.csdn.net/qq_36484899/article/details/94056294

版权

图表动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ECHATS入门

获取/引入

官网

使用必须初始化xAxis,yAxis,series和必须有hight,width；

下载：完全版，压缩版，自定义版（在线官网生成/npm生成）；
npm

//npm
npm i echarts --save

默认设置通过npm构建：例如toolbox默认提示文字为中文；

使用

js：直接引入echarts.js后即可，使用echarts的API

var myEchart = echarts.init(document.getElementById("id"));//初始化
var option = {...}//定义JSON
myEchart.setOption(option);//图形化

webpack

//直接在项目中使用，引入后，常规操作即可
var echarts = require('echarts');

柱状图

var option = {
	title:{
		text:"title"
	},
	lengend:{
		data:["tool title"]//悬停提示标题
	}
	tooltip:{},
	xAxis:{
		data:["1","2","3","4","5","6","7"]//x轴条目
	},
	yAxis:{},//y轴条目
	series:[{
		name:"tooltip title",//需和lengend一致，保证正确渲染
		type:"bar",//柱状图
		data:[5,5,5,5,5,5,5,5]//条目对应的数值
	}]
	}
myEchart.setOption(option);

南丁格尔图（饼状图）

var option = {
	series:[
		name:"tool title",
		type:"pie",//饼状图
		//roseType: 'angle'，//增加此项，南丁格尔图
		radius:"55%",//饼大小，100%会超出绘图区
		data:[
			{value:235,name:"1"},
			{value:235,name:"2"},
			{value:235,name:"3"},
			{value:235,name:"4"},
			{value:235,name:"5"}
		]
	]
}

样式(颜色)

颜色主题

内置两种：var chart = echarts.init([dom],"<light/dark>")，直接注册使用；
其他：在线主题编辑器，下载引入

//JSON 格式文件
$.getJSON("./test.json",function(){//JQuery
	echarts.registerTheme("test",JSON.parse(themeJSON));
	var chart = echarts([dom],"test");
})
//UMD格式的JS文件，HTML引入test.js后，直接可以注册
var chart = echarts.init([dom],"test");

调色板

option中自定义一组颜色使用，全局或专属；

option = {
	//全局
	color:["#ccc"]
	//专属
	series:[{
		type:"bar",
		color:[]
	},{
		type:"pie",
		color:[]
	}]
}

直接设置样式

对itemStyle、lineStyle、areaStyle、label设置

高亮样式

默认自动生成，可以自定义，例如‘悬停时’高亮状态；

option = {
	series:{
	type:"scatter",
	//普通样式
	itemStyle:{
			color:"red"//点的颜色
		}
	}
	label:{
		show:true,
		formatter:"test"//标签文字
	},
	//高亮时
	emphasis:{
		itemStyle:{
			color:"blue"//高亮时点的样式
		}，
		lable:{
			show:true,
			formatter:"yooo"//高亮时显示文字
		}
	}
}

visualMap

视觉通道（尺寸、颜色等）的映射

异步加载和更新

框架动态加载数据
loading动画：mychart.showLoading()、mychart.hideLoading()
数据更新：重新setOption填入数据，自动差异化变化视图

管理数据

echart 4 开始支持dataset单独声明数据集，不用写在series里，提升复用性；

//数组
var mydata = [
	["x","1","2","3"],
	["x1","x1value1","x1value2","x1value3"],
	["x2","x2value1","x2value2","x2value3"]
]
var option = {
	...
	dataset:{source:mydata},
	xAxis:{type:"category"},//对应第一列
	yAxis:{},
	series:[
		{type:"bar"},//对应dataset的每二列
		{type:"bar"}//对应dataset的每三列
	]
}

//对象
var mydata = {
	dimensions:["title","1","2","3"],//x轴
	source:[
		{title:"x1","1":"x1value1","2":"x1value2","x3":"x1value3"},
		{title:"x2","1":"x2value1","2":"x2value2","x3":"x2value3"}
	]
}
var option = {
	...
	dataset:mydata,
	series:[
		{type:"bar"},
		{type:"bar"}
	]
	...
}