echarts
前言:
老大说要让我帮产品做个报表,让我看是用 python的,还是用echarts。
由于python不是很熟悉,就选了echarts,虽然echarts也没玩过,但是只要是java服务,不都是后台请求接口,前端展示数据。
目录:
使用:
直接去echarts
官网拿样式,按照提示来。
.png)]
copy代码
折线图
类型:
- 单线图
- 多线图
单线图
数据结构分析:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
多线图
多线图和单线图没啥区别,就是y轴有多组数据
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
柱状图
类型:
基本上就是分为多柱图和单柱图
- 单柱图
- 多柱图
单柱图
多柱图
实例
折线图
效果图
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Stacked Line Chart - Apache ECharts Demo</title>
<link rel="stylesheet" href="./style.css">
<script src="../../js/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../css/element.css">
<link rel="stylesheet" href="../../css/base.css">
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>
</head>
<body>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">门店</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
请选择门店
<span class="caret"></span>
</button>
<!--<ul class="dropdown-menu" id="select_store" name="storeName">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>-->
<select id="issued_sub_key_c" name="issued_sub_key_c">
<option>请选择门店</option>
</select>
</div>
</div>
<div id="wrapper" v-cloak>
<el-container>
<el-container>
<!-- 主体区域 -->
<el-main>
<div style="height: 1px; background-color: white"></div>
<el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"
@keyup.enter.native="loadTable"></el-input>
<el-select v-model="selectStore" filterable placeholder="请选择" clearable filterable
@change="selectTrigger(selectStore)">
<el-option
v-for="item in options"
:key="item.tiktokId"
:label="item.storeName"
:value="item.tiktokId"
@click.native="changeProduct(item)">
</el-option>
</el-select>
</el-main>
</el-container>
</el-container>
</div>
<div class="container-fluid">
<div class="row-fluid">
<h1>单门店数据分析维度</h1>
<div class="span12">
<div class="row-fluid">
<div class="span6">
<div id="chart-container"></div>
</div>
<div class="span6">
<div id="chart-container2"></div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div id="chart-container3"></div>
</div>
<div class="span6">
<div id="chart-container4"></div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div id="chart-container5"></div>
</div>
<div class="span6">
<div id="chart-container6"></div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div id="chart-container7"></div>
</div>
<div class="span6">
<div id="chart-container8"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script src="./index.js"></script>
<script>
let urlBase = "/api/notice/";
new Vue({
el: "#wrapper",
data: {
user: {},
tableData: [],
pageNum: 1,
pageSize: 10,
total: 0,
dialogFormVisible: false,
entity: {},
isCollapse: false,
search: '',
options: [{
tiktokId: '选项1',
storeName: '黄金糕'
}],
selectStore: {
},
productActive: '',
},
created() {
//下拉框调用函数
this.selectStore1();
},
methods: {
selectTrigger(val) {
console.info("val:",val)
},
changeProduct(item) {
this.selectStore = item.tiktokId;
console.info("item.tiktokId:", item.tiktokId)
console.info("this.selectStore:", this.selectStore)
console.info("调用sendAjax方法!")
let obj={};
obj.tiktokId=item.tiktokId;
sendAjax(obj);
},
handleCollapse() {
this.isCollapse = !this.isCollapse;
},
selectStore1() {
$.ajax({
url: "http://localhost:9998/api/tiktokWeeklyStore/listAllSore",//请求的url地址
dataType: "json",//返回的格式为json
async: true,//请求是否异步,默认true异步,这是ajax的特性
data: {},//参数值
type: "POST",//请求的方式
}).then(res => {
this.options = res.data;
console.log("res.data.storeName:", this.options)
})
}
}
})
</script>
</body>
</html>
css
* {
/* margin: 0;
padding: 0;*/
}
#chart-container {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container2 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container3 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container4 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container5 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container6 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container7 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
#chart-container8 {
/*position: relative;
height: 100vh;
overflow: hidden;*/
width: 500px;
height: 500px;
}
js
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom2 = document.getElementById('chart-container2');
var myChart2 = echarts.init(dom2, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom3 = document.getElementById('chart-container3');
var myChart3 = echarts.init(dom3, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom4 = document.getElementById('chart-container4');
var myChart4 = echarts.init(dom4, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom5 = document.getElementById('chart-container5');
var myChart5 = echarts.init(dom5, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom6 = document.getElementById('chart-container6');
var myChart6 = echarts.init(dom6, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom7 = document.getElementById('chart-container7');
var myChart7 = echarts.init(dom7, null, {
renderer: 'canvas',
useDirtyRect: false
});
var dom8 = document.getElementById('chart-container8');
var myChart8 = echarts.init(dom8, null, {
renderer: 'canvas',
useDirtyRect: false
});
const chartList = [myChart, myChart2, myChart3, myChart4, myChart5, myChart6, myChart7, myChart8]
var app = {};
var option;
var option1;
option1 = {
title: {
text: '单门店数据分析维度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
option2 = {
title: {
text: '单门店数据分析维度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
option3 = {
title: {
text: '单门店数据分析维度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
option4 = {
title: {
text: '单门店数据分析维度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
if (option1 && typeof option1 === 'object') {
myChart.setOption(option1);
}
if (option2 && typeof option2 === 'object') {
myChart2.setOption(option2);
}
if (option3 && typeof option3 === 'object') {
myChart3.setOption(option3);
}
if (option4 && typeof option4 === 'object') {
myChart4.setOption(option4);
}
function sendAjax(obj) {
$.ajax({
url: "http://localhost:9998/api/tiktokWeeklyStore/singleStore",//请求的url地址
dataType: "json",//返回的格式为json
contentType: "application/json",
async: true,//请求是否异步,默认true异步,这是ajax的特性
data: JSON.stringify(obj),//参数值
type: "POST",//请求的方式
success: function (data) {
//console.log("this")
//console.log(data.data)
if (data) {
option1.xAxis.data = data.data.xlist;
// var series = [];
// var names = [];
let i = 0
$("#main").empty();// 清空div内容
for (var key in data.data.ymap) {
//console.log("key", key)
var series = [];
var names = [];
let title = [];
var datas = data.data.ymap[key];
var Item = {
name: key,
type: 'line',
data: datas
};
//names = [];//将要展示的名字集合清空
//series = [];
title.push(key);
series.push(Item);
names.push(key);
let newOption = option1
newOption.title.text = title
newOption.series = series
newOption.legend.data = names
//console.log("newOption", newOption)
chartList[i].hideLoading();
chartList[i].setOption(newOption);
chartList[i].hideLoading();
i++
}
}
},
error: function (e) {
console.log(e)
}
})
}
sendAjax();
let store = {
name: {},
id: {}
};
$.ajax({
url: "http://localhost:9998/api/tiktokWeeklyStore/listAllSore",//请求的url地址
dataType: "json",//返回的格式为json
async: true,//请求是否异步,默认true异步,这是ajax的特性
data: {
warehouse: $("#issued_sub_key_c").val(),
},//参数值
type: "POST",//请求的方式
success: function (data) {
console.log("this")
console.log(data.data)
if (data) {
console.log("store.data",data.data)
/*for(let i=0;data.data.length;i++) {
$("#select_store").append("<li>"+data.data[i]+"</li>");
}*/
for (var i = 0; i < data.data.length; i++) {
store = {
name: data.data[i].storeName,
id: data.data[i].tiktokId
};
console.info("store:"+store)
$("#issued_sub_key_c").append("<option>" + data.data[i].storeName + "</option>");
}
}
}
})
window.addEventListener('resize', myChart.resize);
柱状图
效果图
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Stacked Line Chart - Apache ECharts Demo</title>
<script src="../../js/jquery.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="../../js/jquery.min.js"></script>
</head>
<body>
<div class="layui-col-xs6">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<!-- <div id="columnar" style="width: 800px;height:600px;"></div>-->
</div>
<div id="bar-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script src="./bin.js"></script>
</body>
</html>
css
* {
/* margin: 0;
padding: 0;*/
}
#bar-container {
position: relative;
height: 100vh;
overflow: hidden;
/*width: 500px;
height: 500px;*/
}
js
var dom = document.getElementById('bar-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
option = {
title: {
text: '所有门店数据分析维度'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
$.ajax({
url: "http://121.196.28.196:9998/api/tiktokWeeklyStore/allStoreDataAnalysis",//请求的url地址
dataType: "json",//返回的格式为json
async: true,//请求是否异步,默认true异步,这是ajax的特性
data: {},//参数值
type: "POST",//请求的方式
success: function (data) {
console.log("this")
console.log(data.data)
if (data) {
var series = [];
var names = [];
let xAxis = [];
for (let item of data.data.xdata) {
let xItem = {
axisTick: {show: false},
data: item
}
}
let xItem = {
type: 'category',
axisTick: {show: false},
data: data.data.xdata
}
xAxis.push(xItem);
//$("#main").empty();// 清空div内容
for (var key in data.data.ymap) {
console.log("key", key)
//var series = [];
//var names = [];
//let title = [];
var datas = data.data.ymap[key];
var Item = {
name: key,
type: 'bar',
data: datas
};
//names = [];//将要展示的名字集合清空
//series = [];
//title.push(key);
series.push(Item);
names.push(key);
}
option.xAxis=xAxis;
console.log("xAxis",option.xAxis)
option.series = series;
option.legend.data = names;
console.log("names",names)
console.log(series)
myChart.hideLoading();
myChart.setOption(option);
myChart.hideLoading();
}
},
error: function (a, b, c) {
console.log(errors)
}
})
window.addEventListener('resize', myChart.resize);
注意点:
总结:
- 需要引入jquery的时候一定在最前面
{
console.log(“key”, key)
//var series = [];
//var names = [];
//let title = [];
var datas = data.data.ymap[key];
var Item = {
name: key,
type: 'bar',
data: datas
};
//names = [];//将要展示的名字集合清空
//series = [];
//title.push(key);
series.push(Item);
names.push(key);
}
option.xAxis=xAxis;
console.log("xAxis",option.xAxis)
option.series = series;
option.legend.data = names;
console.log("names",names)
console.log(series)
myChart.hideLoading();
myChart.setOption(option);
myChart.hideLoading();
}
},
error: function (a, b, c) {
console.log(errors)
}
})
window.addEventListener(‘resize’, myChart.resize);
## 注意点:
**总结:**
- 需要引入jquery的时候一定在最前面