Echarts实例：
https://echarts.apache.org/examples/zh/index.html#chart-type-bar
学习Echarts网址：
https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
术语速查手册:
https://echarts.apache.org/zh/cheat-sheet.html
EChart Gallery:向其他优秀的echarts使用者学习
Gallery
echarts图表怎么铺满容器
柱状图要使用grid
"grid": {
"top": "15%",
"bottom": "15%",
"right": "5%",
"left": "8%"
},
饼状图要使用radius，将radius设置成百分百
radius: '55%',
center: ['50%', '55%'],
1.修改X轴的相关信息
1.1. X轴
xAxis: {}
1.2. X轴的数据，data，Y轴也可以设置
xAxis: {
data: [],
}
1.3. X轴文字标签，Y轴也可以设置
xAxis: {
axisLabel: { //X轴标签
interval: 0, //0,每列都显示,隔一列显示一个
rotate: 12, //旋转角度
show: true,
textStyle: {
color: '#65ABE7',//字体颜色
fontSize: 12 //字体大小
}
},
}
1.4. X轴的颜色，Y轴也可以设置
xAxis: {
axisLine: { //X轴颜色
show: true,
lineStyle: {
color: '#657CA8',
}
}
}
1.5.刻度线
axisTick: { show: false }
2. Y轴，Y轴可能分为左边Y轴和右边Y轴
yAxis: [
{
type: 'value',
min: 0, //最小值
max: 3500, //最大值
interval: 500, //间隔
}
]
2.1. Y轴分隔符，X轴同样也有
yAxis: [
{
splitLine: { //Y轴分隔符
show: true,
lineStyle: {
color: '#ccc',
type: 'dashed'
}
}
}
]
2.2. 如何设置右边Y轴的百分比，通过formatter：格式器
yAxis: [
{},
{
type: 'value',
min: 0,
max: 400,
axisLabel: {
formatter: '{value} %'
},
splitLine: { //去掉右边百分比的切割轴
show: false,
lineStyle: {
color: '#2b394e'
}
},
}
]
2.3. 如何根据右边轴的百分比显示
{
yAxisIndex: 1, //根据右边轴显示
name: '库存周转率',
type: 'line',
data: []
}
2.4. Y轴刻度线，X轴同样适用
axisTick: {
show: false,
splitNumber: 1,
lineStyle: {
color: "rgba(0,197,241,1)", //用颜色渐变函数不起作用
width: 1,
},
length: -8
}
3. 图表数据，series，数组，有可能会有4组数据或更多
3.1. 修改柱体颜色
series: [
{
type: 'bar',
data: [],
itemStyle: {
normal: {
color: '#657CA8'
}
},
},
{
type: 'bar',
data: [],
itemStyle: {
normal: {
color: '#6ef2d7'
}
}
}
]
4.legend：说明，图例
legend: {
right:"1%",
top:"center",
orient:"vertical",
data: [],
textStyle:{
color:"#65ABE7",
fontSize:24
}
}
5.title：标题
title: {
left: 'center', //位置
top: '10px', //距离
text: '成品仓周库存周转率', //文本
textStyle: { //文本样式
fontSize: 24,
fontWeight: 'bolder',
color: '#ccc'
},
}
6.Echarts实现自适应
6.1. 使用onresize事件监听屏幕宽度的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height: 40vh;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
}
</script>
</body>
</html>
6.2. 通过字体的自适应实现图表的自适应
option.series[0].label.fontSize = getSize(14, 1920);
option.xAxis[0].axisLabel.textStyle.fontSize=getSize(14,3840);
option.yAxis.axisLabel.textStyle.fontSize=getSize(14,3840);
option.legend.data[0].textStyle.fontSize = getSize(14, 3840);
option.legend.data[1].textStyle.fontSize = getSize(14, 3840);
function getHSize(res, designSize){
let clientWidth = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
if (!clientWidth) return;
let getSize = (clientWidth / designSize);
return res*getSize;
}
7.折线的颜色以及折线上的文字样式
series: [
{
name: '平均库存量',
type: 'line',
data: [],
itemStyle: {
normal: {
color: '#4e81bd', //折线颜色
label: {
show: true, //显示
position: 'top', //在上方
textStyle: { //文字样式
color: 'black',
fontSize: 12
}
}
}
},
}
]
8.判断是什么类型的图
series: [
{
type: 'line', //折线图
type: 'bar' //柱状图
}
]
9.网格：grid，位置距离网格的距离
"grid": {
"top": "0%",
"bottom": "0%",
"right": "0%",
"left": "0%"
}
10.tooltip：提示
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
}
11.饼状图
series: [
{
name: '',
type: 'pie',
radius: ["15%", "50%"],
center: ['40%', '50%'],
roseType: 'area',
label:{
show:true,
formatter :"{c}\n{b}",
fontSize:24,
},
data: []
}
]
12.boundaryGap：边界间隙
xAxis: {
boundaryGap:true,
}
折线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height: 40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {},
legend: {
},
xAxis: {
data: ["2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15"]
},
yAxis: [{
type: 'value',
min: 0,
max: 10,
interval: 2,
// axisLine: {show:false},
}
],
series: [{
type: 'line',
data: [9.4, 4.3, 4, 4.6, 2.3, 9.3, 5.8, 5.9, 2.4, 4, , 3.4, 5.8],
itemStyle: {
normal: {
color: '#E75E66',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
}
</script>
</body>
</html>
折线图2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图2</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height: 40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {
data:['开关','电压表','二极管','电阻'],
top:0,
right:'10%',
textStyle:{
color:"#65ABE7",
fontSize:12
}
},
xAxis: {
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
axisTick: {
show: false
},
axisLabel: { //X轴标签
show: true,
textStyle: {
color: '#65ABE7',//字体颜色
fontSize: 12 //字体大小
}
},
axisLine: { //X轴颜色
show: true,
lineStyle: {
color: '#657CA8',
}
}
},
yAxis:[
{
type: 'value',
min:0,
max:50000,
interval:10000,
axisLine: {show:false},
axisTick: {
show: false
},
axisLabel: { //X轴标签
show: true,
textStyle: {
color: '#65ABE7',//字体颜色
fontSize: 12 //字体大小
},
splitLine: {
show: true,
lineStyle: {
color: '#65ABE7'
}
}
}
}
] ,
series: [
{
name: '开关',
type: 'line',
data: [2000, 1000, 3000,5000,4000,1000,4500,6000,7600,4500,5000,6000],
itemStyle: {
normal: {
color:'#4e81bd',
}
},
},
{
name: '电压表',
type: 'line',
data: [4000, 2000, 1500,2500,8000,2000,9000,3000,3600,2200,3000,9000],
itemStyle: {
normal: {
}
}
},
{
name: '二极管',
type: 'line',
data: [6000, 6000, 6000,6000,6000,6000,6000,6000,6000,6000,6000,6000],
itemStyle: {
normal: {
color:'#9db960'
}
}
},
{
name: '电阻',
type: 'line',
data: [30000, 30000, 30000,30000,30000,30000,30000,30000,30000,30000,30000,30000],
itemStyle: {
normal: {
color:'#7b649a'
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
}
</script>
</body>
</html>
滑线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑线图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height: 40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {},
legend: {
},
xAxis: {
data: ["2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15", "2020-01-15"],
axisLabel: {
textStyle: {
color: '#65ABE7',
fontSize: 8
}
},
axisLine: {
lineStyle: {
color: '#657CA8',
}
}
},
yAxis: [{
type: 'value',
min: 6,
max: 22,
interval: 2,
splitLine: { //Y轴分隔符
show: true,
lineStyle: {
color: '#65ABE7',
}
},
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#65ABE7',
fontSize: 8
}
},
axisLine: {
show: false
},
axisTicks: {
show: false
}
}],
series: [{
smooth: true,
type: 'line',
data: [12, 9, 13, 10, 14, 16, 19],
}, {
smooth: true,
type: 'line',
data: [3, 12, 9, 19, 10, 9, 12],
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dashed' //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
}
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
}
</script>
</body>
</html>
柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 50%;height:38vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '数量top5',
left: 'center',
top: '10px',
textStyle: { //文本样式
fontSize: 24,
color: '#7f7f7f'
}
},
xAxis: {
data: ["路板", "电容", "电阻", "电感", "电解"],
axisTick: {
show: false,
},
axisLine: {
show: false
}
},
yAxis: [{
type: 'value',
min: 0, //最小值
max: 35, //最大值
interval: 5, //间隔
axisTick: {
show: false,
},
axisLine: {
show: false
}
}],
series: [{
name: '销量',
type: 'bar',
data: [32, 19, 18, 15, 12],
itemStyle: {
normal: {
color: '#4f81bd',
label: {
show: true, //显示
position: 'top', //在上方
textStyle: { //文字样式
color: 'black',
fontSize: 12
}
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
}
</script>
</body>
</html>
饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
//初始化ehcharts实例
var myChart=echarts.init(document.getElementById("box"));
//指定图表的配置项和数据
var option={
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
top:'bottom',
data: ['开立', '操作中', '关结'],
textStyle:{
color:'#65ABE7',
fontSize:12
}
},
series: [
{
name: '当天单据的状态占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
label:{
show:true,
formatter:'{b}\n{c}%',
fontSize:12,
},
data: [
{value: 60, name: '开立'},
{value: 25, name: '操作中'},
{value: 15, name: '关结'}
],
//data:docStatusPro,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color:['#4393DB','#F38349','#DBCF29']
};
//使用刚刚指定的配置项和数据项显示图表
myChart.setOption(option);
</script>
</body>
</html>
echarts 多组数据在同一坐标轴显示 toolTips 自定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tooltip自定义</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 60%;height: 40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {
data: ['允许批数', '拒收批数', '让步接收批数', '部分接收批数', '目标合格率', '合格率'],
bottom: 0
},
tooltip: {
trigger: 'axis',
formatter: function (param) {
let str = "";
let dada = 0;
for (let i = param.length - 1; i >= 0; i--) {
if (param[i].seriesName === '目标合格率' || param[i].seriesName === '合格率') {
param[i].data = param[i].data + "%";
}
str = str + param[i].marker + param[i].seriesName + " : " + param[i].data + '<br>';
}
return str
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
data: ["7/26", "7/27", "7/28", "7/29", "7/30", "7/31"],
axisLine: { show: false },
axisTick: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
}
},
},
yAxis: [
{
type: 'value',
min: 0,
max: 100,
interval: 10,
axisTick: { show: false },
axisLine: { show: false }
},
{
type: 'value',
min: 90,
max: 100,
interval: 1,
axisLabel: {
formatter: '{value} %'
},
axisTick: { show: false },
axisLine: { show: false }
},
],
series: [
{
name: '允许批数',
type: 'bar',
stack: '总量',
data: [40, 52, 78, 40, 91, 72],
itemStyle: {
normal: {
color: '#4e81bd',
label: {
show: false
}
}
},
},
{
name: '拒收批数',
type: 'bar',
stack: '总量',
data: [1, 0, 0, 1, 3, 1],
itemStyle: {
normal: {
label: {
show: false
}
}
}
},
{
name: '让步接收批数',
type: 'bar',
stack: '总量',
data: [0, 1, 2, 0, 2, 1],
itemStyle: {
normal: {
color: '#9db960',
label: {
show: false
}
}
}
},
{
name: '部分接收批数',
type: 'bar',
stack: '总量',
data: [0, 0, 1, 0, 2, 0],
itemStyle: {
normal: {
color: '#7b649a',
label: {
show: false
}
}
}
},
{
yAxisIndex: 1,//根据右边轴显示
name: '目标合格率',
type: 'line',
data: [95, 95, 95, 95, 95, 95],
itemStyle: {
normal: {
color: '#49abc3',
label: {
show: true, //开启显示
formatter: '{c}%',
position: 'bottom', //在下方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
},
{
yAxisIndex: 1,//根据右边轴显示
name: '合格率',
type: 'line',
data: [97.56, 98.11, 96.3, 97.56, 92.86, 97.3],
itemStyle: {
normal: {
color: '#ef984f',
label: {
show: true, //开启显示
formatter: '{c}%',
position: 'bottom', //在下方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
}
</script>
</body>
</html>
修改一下判断，以上判断写死了，不够灵活
tooltip: {
trigger: 'axis',
formatter: function (param) {
let str = "";
let dada = 0;
for (let i = param.length - 1; i >= 0; i--) {
if(param[i].componentSubType ==='line'){
param[i].data = param[i].data + "%";
} if(param[i].componentSubType ==='bar'){
param[i].data = param[i].data + "个";
}
str = str + param[i].marker + param[i].seriesName + " : " + param[i].data + '<br>';
}
return str
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
实现功能：封装图表，别人只要传参数进去，就能自定义tootip
错误：之前这样取tooltip：_This.HeadList.tooltip，少了[i]，切记
处理逻辑前：先打印 if 里面的条件看看能不能取到数据
tooltip: {
trigger: 'axis',
formatter: function (param) {
console.log(param);
let str = "";
let dada = 0;
for (let i = param.length - 1; i >= 0; i--) {
console.log("表头数组",_This.HeadList);
if(_This.HeadList[i+1].tooltip == 'rate'){
param[i].data = param[i].data + "%";
}else if(_This.HeadList[i+1].tooltip == 'num'){
param[i].data = param[i].data + "个";
}
str = str + param[i].marker + param[i].seriesName + " : " + param[i].data + '<br>';
}
return str
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
过滤，直接拼接上单位，之前想复杂了
tooltip: {
trigger: 'axis',
formatter: function (param) {
let str = "";
let dada = 0;
var tooltipList=_This.HeadList.filter(x =>{ return x.chartType != undefined && x.chartType.length > 0 && x.chartType != 'xAxis'});
for (let i = param.length - 1; i >= 0; i--) {
if(tooltipList[i].unit != undefined){
param[i].data = param[i].data + tooltipList[i].unit;
}
str = str + param[i].marker + param[i].seriesName + " : " + param[i].data + '<br>';
}
return str
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
直接使用！=，可能会发生错误，所以使用typeof来判断
tooltip: {
trigger: 'axis',
formatter: function (param) {
let str = "";
let dada = 0;
var tooltipList=_This.HeadList.filter(x =>{ return x.chartType != undefined && x.chartType.length > 0 && x.chartType != 'xAxis'});
for (let i = param.length - 1; i >= 0; i--) {
if(typeof(tooltipList[i].unit) !='undefined'){
param[i].data = param[i].data + tooltipList[i].unit;
}
str = str + param[i].marker + param[i].seriesName + " : " + param[i].data + '<br>';
}
return str
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
