一、基本图
- 安装echarts
- 需要一个大小的DIV（高和宽）
- 从官网找一个符合自己需求的基本图，下面以基本的柱状图为例
//声明ECharts图相关的东西
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
//配置相关设置
option = {
xAxis: {
type: 'category',
//X轴显示的值（常见 时间，类别名之类的东西）
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
//Y轴的设置
yAxis: {
type: 'value'
},
//具体图中显示的设置
series: [
{
//值
data: [120, 200, 150, 80, 70, 110, 130],
//柱状图（bar），条形图（line）等
type: 'bar'
}
]
};
//将option 放到ECharts的setOption中
option && myChart.setOption(option);
二、Ajax异步请求数据
话不多说，直接上代码吧
function getChartDLQchart() {
//先对提取的数据声明变量
X轴字段名 = [];
Y轴字段名 = [];
数据字段名 = [];
//Ajax异步请求
$.ajax({
url: "路由地址", //请求的接口名
type: 'post',
dataType: 'json',
async: true,
success: function (result) {
//成功后数据提取
var i = 0;
var alen = result.result;
for (var i = 0; i < alen.length; i++) {
X轴字段名.push(alen[i].数据库字段名1);
Y轴字段名.push(alen[i].数据库字段名2);
数据字段名.push(alen[i].数据库字段名3);
}
//声明ECharts表
var chartDom = document.getElementById('DLQchart');
var myChart = echarts.init(chartDom);
var option;
option = {...... };
myChart.setOption(option);
//将ECharts表传进去
window.addEventListener("resize", function () {
myChart.resize();
});
},
//Ajax部分请求失败提示
error: function () {
console.log('失败')
}
})
}
也可以这样写，就是把异步请求写到ECharts里面，看具体情况使用吧，大部分时候怎么写都行。
function getChartqstchart() {
var chartDom = document.getElementById('qstechart');
var myChart = echarts.init(chartDom);
X轴字段名 = [];
Y轴字段名 = [];
数据字段名 = [];
myChart.showLoading() //等待的那个转圈圈开始
$.ajax({
url: "/api/cockpit/v2queryecharts", //请求的接口名
type: 'post',
data: data,
dataType: 'json',
async: true,
success: function (result) {
myChart.hideLoading() //等待的那个转圈圈结束
//成功后数据提取
var i = 0;
var alen = result.result;
for (var i = 0; i < alen.length; i++) {
X轴字段名.push(alen[i].数据库字段名1);
Y轴字段名.push(alen[i].数据库字段名2);
数据字段名.push(alen[i].数据库字段名3);
}
option = {...... };
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
},
//Ajax部分请求失败提示
error: function () {
console.log('失败')
}
})
}
三、让柱形图可以根据指标进行变色I（条形图、点等都适用）
场景：数据有实际值，指标值，实际值小于指标值是红色，大于指标值绿色
其实就是对值进行一个判断，再带入到ECharts的option-series-需要变色的那个值中。
function getChartDLQchart() {
var X轴字段名 = [];
var Y轴字段名 = [];
var 数据字段名 = [];
var 指标字段名 = [];
var 颜色= [];
$.ajax({
url: "/api/cockpit/queryZD", //请求的接口名
type: 'post',
dataType: 'json',
async: true,
success: function (result) {
var i = 0;
var alen = result.result;
for (var i = 0; i < alen.length; i++) {
X轴字段名.push(alen[i].数据库字段名1);
Y轴字段名.push(alen[i].数据库字段名2);
数据字段名.push(alen[i].数据库字段名3);
指标字段名.push(alen[i].数据库字段名4);
}
if (alen[i].数据库字段名3 >= alen[i].指标值) {
颜色.push("green");
} else {
颜色.push("red");
}
}
option ={
series: [
{
name: '实际值',
data: ZP8DLQ,
type: 'bar',
barWidth: '30',
barCategoryGap: '50%',
itemStyle: {
normal: {
color: function (params) {
return 颜色[params.dataIndex]
}
}
},
}
]
四、空数据的柱子不显示0，显示空或者其他自定义的字符
series: [
{
name: '实际值',
data: 指标字段名,
type: 'bar',
label: {
position: 1,
normal: {
show: true,
position: 'inside',
//标签描边-颜色
// textBorderColor: { color: '#000000' },
formatter: function (params) {
if (params.value > 0) {
return params.value
} else {
return ''//这里是单引号，单引号中间什么也没有则轴上什么也不显示，需要自定义的话则再引号中间填写想写的内容即可。
}
}
},
}
},
五、叠柱图+双轴
图省事，就直接写关键代码了
//Y轴要设置两个，用中括号包含两个大括号
yAxis: [
{
type: 'value',
show: true,
// name: '分值',
axisLine: {
lineStyle: {
color: '#fff',
},
},
min: 0,//设置坐标轴最小值
max: 20,//设置坐标轴最大值
position: 'left',//左侧坐标轴
axisLabel: {
show: true,
textStyle: {
color: '#fff',
},
},
splitLine: {
show: false,
lineStyle: {
color: '#012f4a'
},
},
},
{
type: 'value',
show: false,
// name: '等级',
min: 0,
max: 1.7,
position: 'right',//右侧坐标轴
axisLabel: {
show: true,
textStyle: {
color: '#fff',
},
},
splitLine: {
show: false,
lineStyle: {
color: '#012f4a'
},
},
},
],
series: [
{
name: 'C1',
data: C1,
type: 'bar',
stack: 'RANK',//叠柱的关键代码
yAxisIndex: 0,//双轴的关键代码
}，
{
name: 'B',
data: B,
type: 'bar',
stack: 'RANK',//叠柱的关键代码
yAxisIndex: 0,//双轴的关键代码
barWidth: '30',
barCategoryGap: '50%',
},
{
name: 'B1',
data: B1,
type: 'line',
yAxisIndex: 1,//双轴的关键代码
barWidth: '30',
barCategoryGap: '50%',
},
{
name: 'B1',
data: B1,
type: 'line',
yAxisIndex: 1,//双轴的关键代码
barWidth: '30',
barCategoryGap: '50%',
},
]
六、双柱双折线图
这种图我也是查找好久才搜到答案的，具体参考下这里把Echarts双柱状图与双折线图
不过这种方式会出现提示框错误的情况，我也没有太好的解决方法
再一个X轴的data数据再进行异步请求的时候也要做一些变化（写死的没事）
我的当时出现了每个柱子下面都有X轴坐标的名称，例如：周一 周一 周二周二 周三周三 这种，需要把数据进行遍历去重，变成周一 周二 周三 这种就好了
一下是我遍历的内容，仅供参考
//需要提前声明下方用到的变量
//以下为处理数据逻辑
let data = result.result //获取后台返回所有数据集合
// 遍历集合，分别取出数据
data.forEach((item, index) => {
// 取出 所有（真）专业值 集合
if (item['专业']) departments.push(item['专业'])
// 取出所有指标为 B 的数据集合
if (item['指标名称'] === 'B') b_datas.push(item)
// 取出所有指标为 C1 的数据集合
if (item['指标名称'] === 'C1') c1_datas.push(item)
})
// 对专业值集合进行去重，因为专业值集合中只存在字符串，所以使用ES6的Set进行去重即可
department = Array.from(new Set(departments))
// 循环遍历去重后的专业值，按照专业值顺序进行对应取出 计数值 和 挑战值
department.forEach((item, index) => {
// 对应专业值集合取出指标为 B 的 挑战值 和 计数值 集合，
b_datas.forEach(b_item => {
if (item === b_item['专业']) {
b_defects[index] = (b_item['计数'])
b_targets[index] = (b_item['挑战值'])
b_base[index] = (b_item['基础值'])
}
})
c1_datas.forEach(c1_item => {
if (item === c1_item['专业']) {
c1_defects[index] = (c1_item['计数'])
c1_targets[index] = (c1_item['挑战值'])
c1_base[index] = (c1_item['基础值'])
}
})
七、提示框
提示框有时候会出现这样那样的问题，下面提供一个算是万能的提示框写法（也有个例不行，例如上面说到的双柱双折线提示框出现的问题就解决不了）
tooltip: {
trigger: 'axis',
formatter: function (params) {
var result = "";
console.log(params);
params.forEach(function (item) {
result +=
item.marker +
" " +
item.seriesName +
" : " +
(item.value ? item.value : "--") +
(item.value ? "%" : "") +
"</br>";
});
return params[0].axisValue + "<br />" + result;
},
},
八、饼形图
饼形图基本图形按照官网配置就行，下面主要说一下我遇到的问题，通过异步请求得到的数据如何放到饼形图中（跟柱形图略有不同），主要是数据遍历不同。
let data = result.result //获取后台返回所有数据集合
// 遍历集合，分别取出数据
data.forEach((item, index) => {
// 取出 所有（真）专业值 集合
if (item['缺陷类别']) department.push(item['缺陷类别'])
if (item['缺陷率']) defects.push(item['缺陷率'].toFixed(2))
})
九、按钮点击事件
参考官网使用手册的事件与行为编写
点击图表中的点/柱等进行网页跳转、打开页面、打开模态框等事件行为
myChart.on('click', (params) => {
var locarr = ['点击的点']
console.log(params.data.name);
console.log(locarr);
if (params.data.name != locarr) {
console.log('预留位置')
// $('#carModal').modal("show")
} else { $('#carModal').modal("show")}
})
十、自动刷新
自动刷新说白了就是一个定时任务，设置一个固定事件，重新调用ECharts图表，让里面的数据重新刷一边达到数据动态展现的目的。
var _timerPie1;
_timerPie1 = window.setInterval(function () { //数据动态展现
getChartchart()
}, 30000);
window.onresize = function () {
clearInterval(_timerPie1);
}
十一、其他配置
很多人都写过类似的东西，我也就不在写了，我找了两篇写的比较全的供大家参考
echarts柱状图参数详解
Echarts 柱形图最全详解
如果上面没有需要的配置，也没有搜到相关的帖子，可以上ECharts官网配置项手册中查看自己所需的内容
附：地图（可以用地图展示图表）
这个比较复杂，没深入研究过
1.需要地图的js文件（自行查找）
2.地图配置文件（自行编写）
版权声明：本文为m0_56118578原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。