一,下载echarts相关jar包
此处采用js文件自定义下载:
在构建页面选择完所需模块之后,选择下载:
二,基础概念series
系列(series)是很常见的名词。在 echarts 里,系列(series)是指:一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”,而在 echarts 中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个 系列 包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型(series.type)就是图表类型。系列类型(series.type)至少有:line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)…
三,官方demo
```html
<div id="bar" style="width: 600px;height: 400px;"></div>
<script>
$(function () {
initDemo();
})
function initDemo() {
var myChart = echarts.init(document.getElementById('bar'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
三,样式之基本定位
left,bottom等定位都是对元素进行定位
//图形颜色设置
color:["#EE6666"],
//yAxis:对y轴进行相关设置
yAxis: {splitNumber :2, //y轴分割刻度值,但是echarts会根据y轴的值计算
maxInterval:60,//y轴最大分割值(刻度值),但是如果超出设置大小,echarts会自动计算
},
series: [{//饼状图
name: '销量',
type: 'pie',
data: [5, 20, 36, 10, 10, 20],
width:"17%",//宽,
left:"40%",//距左边
bottom:"66",//距离底部66像素,left,top等定位都是绝对定位(position: absolute)
center: ["43%", "43%"],//采用中心点方式定位,也就是以中心点为坐标[x轴,y轴]移动
radius: ["14%", "49%"]//["中心点大小","外圈饼状图大小"]
}]
四,坐标系:
很多系列,例如 line(折线图)、bar(柱状图)、scatter(散点图)、heatmap(热力图)等等,需要运行在 “坐标系” 上。其他一些系列,例如 pie(饼图)、tree(树图)等等,并不依赖坐标系,能独立存在。
var echart=echarts.init(document.getElementById("xyAxis"));
var colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [//定义三个y轴
{
type: 'value',
name: '蒸发量',
min: 0,
max: 250,
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '降水量',
min: 0,
max: 250,
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
yAxisIndex: 1,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 2,//yAxisIndex:指定数据是属于哪一个y轴,根据集合索引指定
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
echart.setOption(option);
五,简单数据动态交互
页面:
var myChart = echarts.init(document.getElementById('bar'));
$.get('/basic/getListData').done(function (data) {
console.log("data:"+data);
myChart.setOption({
title: {
text: '动态数据'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data:data.week
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data.data
}]
});
});
接口:
@RequestMapping("getListData")
@ResponseBody
public Map<String,Object> getDataArr(){
Map<String, Object> map = new HashMap<>();
List<Integer> arrayList = new ArrayList<>();
arrayList.add(5);
arrayList.add(15);
arrayList.add(8);
arrayList.add(31);
arrayList.add(24);
map.put("data",arrayList);
String [] week={"周一","周二","周三","周四","周五",};
map.put("week",week);
return map;
}