使用百度图表ECharts

最新推荐文章于 2026-05-28 15:41:18 发布

原创最新推荐文章于 2026-05-28 15:41:18 发布 · 1.5w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

开发

博主在将博客访问情况可视化时，为避免反复查阅官网文档，记录使用百度图表ECharts的过程。包括从官网下载源码包，拷贝echarts.min.js到项目，写放图表的div，用js生成图表并利用ajax展示动态数据，还涉及Java代码查询表数据及处理图表点击事件。

来自ZJBLOG ：使用百度图表ECharts

百度图表已经用过好几次了，但是今天准备把博客的访问情况可视化的时候发现，又得去官网看文档做。有些还要找，所以记录一下，毕竟这玩意用的比较多。

ECharts官网

ECharts源码包下载

一共做了3个比较简单的图表（复杂的可以很复杂，还是得去官网看文档），效果图：

12PQAAYS9P`J19ART8FL771.png

VXWCCT2IVIG4DEUYW69)@7U.png

首先呢，从源码包中拷贝echarts.min.js到项目中，然后写放图表的div。

<div id="chart1">

<div id="main" style="width: 720px;height:400px;"></div>

<div id="main2" style="width: 720px;height:400px;"></div>

<div id="main3" style="width: 720px;height:400px;"></div>

</div>

js生成图表，利用ajax请求展示动态数据。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

<script>

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

var myChart2 = echarts.init(document.getElementById('main2'));

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

//图表数据还未加载，显示等待loading

myChart.showLoading();

myChart2.showLoading();

myChart3.showLoading();

$.ajax({

url:'getChartData',

type:'get',

dataType:'json',

success:function(data){

console.log(data)

// 指定图表的配置项和数据

var option = {

title: {

text: '博客最近一周访问量' + data.chart1TotalCount //标题

},

tooltip: {},

legend: {

data:['PV'] //图表上方注释

},

xAxis: {

type: 'category',

data: data.chart1X, //x轴数据

axisTick: {

alignWithLabel: true,

interval:0

},

axisLabel: {

interval:0,

align:'center'

}

},

yAxis: {type: 'value'}, //y轴显示数据

series: [{

name: 'PV', //数据名

stack:"count",

type: 'line', //line折线/bar柱状

data: data.chart1Y, //数据

itemStyle: { //加了这个显示图标中的数据或者设置样式

normal: {

label: {

show: true, //开启显示

position: 'top', //在上方显示

textStyle: { //数值样式

color: 'black',

fontSize: 16

},

formatter: function (params) {

if (params.value > 0) {

return params.value;

} else {

return '';

}

}]

};

myChart.hideLoading();//加载图表数据，隐藏等待loading图表

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

var option2 = {

title: {

text: '常访问的ip和次数'

},

tooltip: {},

legend: {

data:['IP']

},

xAxis: {

type: 'category',

data: data.chart2X,

axisTick: {

alignWithLabel: true,

interval:0

},

axisLabel: {

interval:0,

rotate:30 //x轴显示不下文字，选择倾斜

}

},

yAxis: {type: 'value'},

//dataZoom

dataZoom: [

{

type: 'slider', //控制x轴，滚轮滚动

show: false, //是否显示滚轮

xAxisIndex: [0],

start: 1, //默认开始位置：1%

end: 100 //默认结束位置：100%

},

{

type: 'slider', //控制y轴，滚轮滚动

show: true,

yAxisIndex: [0],

left: '93%',

start: 1,

end: 100

},

{

type: 'inside', //控制x轴，坐标轴内可滚动

xAxisIndex: [0],

start: 1,

end: 100

},

{

type: 'inside', //控制y轴，坐标轴内可滚动

yAxisIndex: [0],

start: 1,

end: 100

}

],

series: [{

name: 'IP',

stack:"count",

type: 'bar',

data: data.chart2Y,

itemStyle: {

normal: {

label: {

show: true, //开启显示

position: 'top', //在上方显示

textStyle: { //数值样式

color: 'black',

fontSize: 16

},

formatter: function (params) {

if (params.value > 0) {

return params.value;

} else {

return '';

}

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart2.hideLoading();

myChart2.setOption(option2);

var option3 = {

title: {

text: '博客每月访问数'

},

tooltip: {},

legend: {

data:['Month PV']

},

xAxis: {

type: 'category',

data: data.chart3X,

axisTick: {

alignWithLabel: true,

interval:0

},

axisLabel: {

interval:0,

rotate:30

}

},

yAxis: {type: 'value'},

dataZoom: [

{

type: 'slider',

show: true,

xAxisIndex: [0],

start: 1,

end: 100

},

{

type: 'slider',

show: true,

yAxisIndex: [0],

left: '93%',

start: 1,

end: 100

},

{

type: 'inside',

xAxisIndex: [0],

start: 1,

end: 100

},

{

type: 'inside',

yAxisIndex: [0],

start: 1,

end: 100

}

],

series: [{

name: 'Month PV',

stack:"count",

type: 'bar',

data: data.chart3Y,

itemStyle: {

normal: {

label: {

show: true, //开启显示

position: 'top', //在上方显示

textStyle: { //数值样式

color: 'black',

fontSize: 16

},

formatter: function (params) {

if (params.value > 0) {

return params.value;

} else {

return '';

}

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart3.hideLoading();

myChart3.setOption(option3);

}

});

//给图表添加点击事件，点击折现转点或柱状图的内容，可以根据自己的需求定义方法

myChart.on('click', function (param) {

$.ajax({

url:'getDataByDate',

type:'post',

data:{'date':param.name},

success:function(data){

console.log(data);

}

});

myChart2.on('click', function (param) {

window.location.href="getDat"

});

myChart3.on('click', function (param) {

window.location.href="getDat"

});

</script>

Java代码：查询出表数据，传到前端和图表点击事件的后台方法

@RequestMapping({"/getDataChart"})

@ResponseBody

public Map<String, Object> getDataChart() {

List<VisitorCounter> recentList = visitorCounterService.selectListDays();

List<VisitorCounter> list = visitorCounterService.selectAll();

Map<String, Integer> countMap = new HashMap<String, Integer>();

Map<String, Integer> countIpMap = new HashMap<String, Integer>();

Map<String, Integer> countMonthMap = new HashMap<String, Integer>();

recentList.stream().forEach(e -> {

String dayNow = new SimpleDateFormat("MM-dd").format(e.getvDate());

countMap.put(dayNow, Tools.isEmpty(countMap.get(dayNow)) ? 1 : countMap.get(dayNow) + 1);

});

list.stream().forEach(e -> {

String MonthNow = new SimpleDateFormat("yyyy-MM").format(e.getvDate());

countIpMap.put(e.getIp(), Tools.isEmpty(countIpMap.get(e.getIp())) ? 1 : countIpMap.get(e.getIp()) + 1);

countMonthMap.put(MonthNow,

Tools.isEmpty(countMonthMap.get(MonthNow)) ? 1 : countMonthMap.get(MonthNow) + 1);

});

Map<String, Object> map = new HashMap<String, Object>();

// 最近七日每天的访问数

Map<String, Integer> countViewMap = sortMapByKey(countMap, true);

int chart1TotalCount = 0;

List<String> chart1X = new ArrayList<String>();

List<Integer> chart1Y = new ArrayList<Integer>();

for (String key : countViewMap.keySet()) {

chart1X.add(key);

chart1Y.add(countViewMap.get(key));

chart1TotalCount += countViewMap.get(key);

}

map.put("chart1X", chart1X);

map.put("chart1Y", chart1Y);

map.put("chart1TotalCount", chart1TotalCount);

// 历史访问前18位的ip和访问次数

Map<String, Integer> countIpViewMap = sortMapByValueInteger(countIpMap, false);

List<String> chart2X = new ArrayList<String>();

List<Integer> chart2Y = new ArrayList<Integer>();

for (String key : countIpViewMap.keySet()) {

chart2X.add(key);

chart2Y.add(countIpViewMap.get(key));

}

map.put("chart2X", chart2X);

map.put("chart2Y", chart2Y);

// 历史每月的访问量

Map<String, Integer> countMonthViewMap = sortMapByKey(countMonthMap, true);

List<String> chart3X = new ArrayList<String>();

List<Integer> chart3Y = new ArrayList<Integer>();

for (String key : countMonthViewMap.keySet()) {

chart3X.add(key);

chart3Y.add(countMonthViewMap.get(key));

}

map.put("chart3X", chart3X);

map.put("chart3Y", chart3Y);

System.out.println(map);

return map;

}

@RequestMapping({"/getDataChartsByDate"})

public String getDataChartsByDate(Model model, String date, String type) throws ParseException {

VisitorCounter vistorCounter = new VisitorCounter();

// Date now = new SimpleDateFormat("yyyy-MM-dd").parse(yearNow + "-" + date);

String time = null;

if ("y".equals(type)) {

time = date;

} else {

String yearNow = new SimpleDateFormat("yyyy").format(new Date());

time = yearNow + "-" + date;

}

vistorCounter.setIp(time);

List<VisitorCounter> recentList = visitorCounterService.selectListByDate(vistorCounter);

model.addAttribute("list", recentList);

model.addAttribute("time", time);

model.addAttribute("count", recentList.size());

return "ht/showCount";

}

标签

#前端