/**
* 统计图模块
*/
var getCommon = {
/**
* 横着立体柱状图模块
* @param {Object} dom
* @param {Object} yData y轴刻度标签
* @param {Object} sData 数据
* @param {Object} option
*/
zhu: function(dom, yData, sData, option) {
var myChart = echarts.init(dom);option = {
// title: {
// text: '标题'
// },
grid: {
top: '10%',
left: '10%',
right: '4%',
bottom: '10%',
containLabel: true //防止标签溢出
},
xAxis: {
show: false,
axisLabel: {
fontSize: 12
}
},
yAxis: {
type: 'category', //坐标轴类型。
inverse: true, //是否是反向坐标轴。
data: [], //x轴刻度标签
axisLine: {
show: false //是否显示坐标轴轴线;不包括数据标签
},
axisTick: {
show: false //是否显示坐标轴刻度。
},
axisLabel: {
color: "pink",
}
},
series: [
//柱体
{
name: '',
type: 'bar',
// data: [1030, 205, 84, 568, 689],
// barGap: '200%',//不同系列的柱间距离，为百分比,(柱子宽度的百分比)
// barCategoryGap:'400',//同一系列的柱间距离，默认为类目间距的20%，可设固定值
barWidth: 20, // 柱体宽度
itemStyle: {
"normal": {
"color": new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: "rgba(89,211,255,0.1)" //0.1是透明度
},
{
offset: 1,
color: "rgba(23,237,194,0.8)" //1是透明度
}
],
false
),
}
},
label: { //图形上的文本标签
normal: {
show: true,
color: "pink",
position: "right", //
formatter: "{c}", //字符串模板,{a}：系列名。{b}：数据名。{c}：数据值。
distance: 10 //距离图形元素的距离。
},
fontSize: 12
}
},
//柱顶圆片
{
name: "",
// data: [1030, 205, 84, 568, 689],
type: "pictorialBar", //象形柱图
symbolSize: [8, 20], //调整截面形状[宽, 高]
symbolOffset: [5, 0], //相对于柱体的截面位置
symbolPosition: "end", //图形的定位位置,'end':图形边缘与柱子结束的地方内切。
z: 12,
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(89,211,255,1)"
},
{
offset: 1,
color: "rgba(23,237,194,1)"
}
],
false
),
}
},
}
]
};
console.log(option.yAxis)
option.yAxis.data = yData //Y轴刻度标签
console.log(option.yAxis.data)
option.series[0].data = sData //柱状图数据
option.series[1].data = sData
// option.series[0].label.fontSize=updataData.labelFontSize
// console.log(option.xAxis)
myChart.setOption(option);
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart.resize();
});},
/**
* 纵着显示立体柱状图
* @param {Object} dom
* @param {Object} xData x轴刻度标签
* @param {Object} sData数据
* @param {Object} option
*/
zhuZong: function(dom, xData, sData, option) {
var myChart = echarts.init(dom);
option = {
grid: {
// top: '10%',
left: '4%',
right: '4%',
bottom: '10%',
containLabel: true //防止标签溢出
},
xAxis: {
type: 'category',
// data: [],
axisTick: {
show: false //是否显示坐标轴刻度。
},
axisLabel: {
color: "pink",
fontSize: 12, //x轴刻度标签的字体大小
},
},
yAxis: {
show: false,
axisLine: {
show: false //是否显示坐标轴轴线;不包括数据标签
}
},
series: [
//柱体
{
name: '',
type: 'bar',
data: [1030, 205, 84, 568, 689],
barWidth: 20, // 柱体宽度
itemStyle: {
"normal": {
"color": new echarts.graphic.LinearGradient(1, 1, 0, 0,
[{
offset: 0,
color: "rgba(89,211,255,0.1)" //0.1是透明度
},
{
offset: 1,
color: "rgba(23,237,194,0.8)" //1是透明度
}
],
false
),
}
},
label: { //图形上的文本标签
normal: {
fontSize: 12, //文字大小
show: true,
color: "pink",
position: "top", //
formatter: "{c}", //字符串模板,{a}：系列名。{b}：数据名。{c}：数据值。
distance: 10 //距离图形元素的距离。
}
}
},
//柱顶圆片
{
name: "",
data: [1030, 205, 84, 568, 689],
type: "pictorialBar", //象形柱图
symbolSize: [20, 8], //调整截面形状[宽, 高]
symbolOffset: [0, -5], //相对于柱体的截面位置
symbolPosition: "end", //图形的定位位置,'end':图形边缘与柱子结束的地方内切。
z: 12,
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(89,211,255,1)"
},
{
offset: 1,
color: "rgba(23,237,194,1)"
}
],
false
),
}
},
}
]
};
option.xAxis.data = xData;
option.series[0].data = option.series[1].data = sData;
myChart.setOption(option);
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart.resize();
});
},
/**
* 折线图
* @param {Object} dom
* @param {Object} brokenData
* @param {Object} option
*/
brokenLine: function(dom, brokenData, option) {
// var yearData = {
// name: ['工作效率','生产量'],/*图例*/
// data: [/*折线数据*/
// [130, 142, 101, 134, 90],
// [220, 182, 191, 234, 180]
// ]
// }
var yearData = {}
// console.log(yearData.data[0])
var areaStyle = null
var myChart2 = echarts.init(dom);
yearData = brokenData;
var option = {
color: ['#02C4E7', '#CBA053'],
legend: {
show: true,
icon: 'roundRect', //图例形状:圆角图例
left:50,//图图例组件离容器左侧的距离。
width: 400, // 单行图例的宽度
formatter: [
'{a|{name}}'
].join('\n'),
textStyle: { // 图例文字样式
barBorderRadius: [10],
fontSize: 10,
color: 'inheri', //文字跟图例颜色一致
rich: {
a: {
width:85, // 每个图例的宽度，具体根据字数调整
lineHeight: 12
}
}
},
data: ['工作效率', '生产量'],
},
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
// show: true,
// borderColor: '#012f4a',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true, //是否两侧留白,默认false
data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
axisTick: {
show: false,
// alignWithLabel:true
},
axisLabel: {
color: 'pink',
/*轴字体颜色*/
},
axisLine: {
lineStyle: {
color: '#eee'
},
/*x轴轴线的颜色*/
},
},
yAxis: {
show: false,
type: 'value',
axisTick: {
show: false
},
axisLabel: {
color: '#4c9bfd'
},
axisLine: {
show: false
},
splitLine: { //去掉网格线
lineStyle: {
color: '#012f4a'
}
}
},
series: [{
name: brokenData.name[0],
type: 'line',
data: [99.66, 99.2, 99.46, 99.1, 99.3],
smooth: true, //是否平滑曲线显示。
symbol: 'circle', //图元的图形:圆
trigger: 'axis',
label: { //图形上的文本标签
normal: {
show: true,
formatter: `{c}%`, //字符串模板,{a}：系列名。{b}：数据名。{c}：数据值。
// formatter: '{b}: {@score}', //字符串模板,{a}：系列名。{b}：数据名。{c}：数据值。
//字符串模板,{a}：系列名。{b}：数据名。{c}：数据值。
distance: 10 //距离图形元素的距离。
}
},
areaStyle: areaStyle ? {
color: 'rgba(89,211,255,0.2)'
} : null,
},
{
name: brokenData.name[1],
type: 'line',
data: brokenData.data[1],
smooth: true,
label: { //图形上的文本标签
normal: {
show: true,
// position: "right", //
formatter: "{c}", //字符串模板,{a}：系列名。{b}：数据名。{c}：数据值。
distance: 10 //距离图形元素的距离。
}
},
areaStyle: areaStyle ? {
color: 'rgba(89,211,255,0.2)'
} : null
}
]
};
myChart2.setOption(option);
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart2.resize();
});
},/**
*多个折线
* @param {Object} domDiv dom
* @param {Object} xData x轴数据
* @param {Object} colorLine 多个折线颜色数组
* @param {Object} seriesList 数据数组
* @param {Object} smooth 是否平滑曲线显示。
*/
brokenLine3: function(domDiv, xData,colorLine ,seriesList,smooth) {
var areaStyle = null
var myChart3
if(myChart3){
echarts.dispose(myChart3)
}
if(myChart3==undefined){
myChart3= echarts.init(domDiv);
}
var seriesData=[];//数据
var legendData=[];//图例
seriesList.forEach((item,index) => {
seriesData.push({
name: item.name,
type: 'line',
data: item.data,
smooth: smooth, //是否平滑曲线显示。
trigger: 'axis',
label: { //图形上的文本标签
show: true,
distance: 10 //距离图形元素的距离。
}
})
legendData.push({name:item.name,textStyle:{color:colorLine[index]}})
})
var option = {
color: colorLine,
legend: { //图例
data: legendData,
top: 15,
padding: [0, 0,10,0],
left: 'center', //图图例组件离容器左侧的距离。
// itemWidth: 15, // 设置宽度
},
tooltip:{
trigger: 'axis',
formatter:'{c}'
},
grid: {//如果x轴name值显示不全，可以调整left和right的值
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true //防止标签溢出
},
xAxis: {
type: 'category',
data: xData,
axisTick: {
show: false,
},
name:'月份',
axisLabel: {
color: '#666666',
/*轴字体颜色*/
},
axisLine: {//name的样式
lineStyle: {
color: '#666666'
},
/*x轴轴线的颜色*/
},
},
yAxis: {
show: true,
type: 'value',
axisTick: {
show: true
},
axisLabel: {
color: '#666666'
},
axisLine: {
show: true
},
},
series: seriesData
};
myChart3.clear()
myChart3.setOption(option,{notMerge: false, lazyUpdate: false, silent:false});
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart3.resize();
});
},
/**
* 水球图
* @param {Object} dom
* @param {Object} percentage 水球涨幅
* @param {Object} option
*/
liquid: function(dom, percentage, option) {
var liquidDom = echarts.init(dom);
var option3 = {
series: [{
type: 'liquidFill',
data: [0.5, 0.5, 0.5, 0.5], //第一个参数对应百分比，后面对应水波高度,最后一个值对应最前面的水波
amplitude: '10%',
waveLength: '200%',
outline: {
show: false
},
shape: 'container',
color: ['rgba(2,196,231, 0.3)', 'rgba(2,196,231, 0.5)', 'rgba(2,196,231, 0.7)',
'rgba(2,196,231, 0.9)'
],
backgroundStyle: {
color: 'none', //背景颜色
// borderColor: '#156ACF',
borderWidth: 1
},label: {
color: 'rgba(2,196,231, 1)', //默认颜色
insideColor: '#fff' 水波经过的颜色
}
}]
};
option3.series[0].data = percentage
liquidDom.setOption(option3);// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
liquidDom.resize();
});
},
/**
* 雷达图
* @param {Object} dom
* @param {Object} indicator indicator配置:数据颜色
* @param {Object} option
*/
radarChart: function(dom, indicator, option) {
var myChart = echarts.init(document.getElementById('distribution'));
var updataRadar = {
color1: '',
color2: '',
color3: '',
bg1: '',
bg2: '',
size1: '',
array1: [],
array2: []
}var option = {
// color: ['rgba(2,196,231, 0.6)'], //所有颜色
radar: {
radius: ' 60%',
center: ['50%', '50%'],
/*（圆心）坐标 ；横坐标：相对于容器宽度,，纵坐标第二项是相对于容器高度*/
splitNumber: 6, // 雷达图圈数设置
shape: 'polygon', //雷达图绘制类型
indicator: indicator,
/** [{
name: '门厅线', //指示器名称
value: 91, //只展示用，要对应下面data的数据
max: 100, //指示器最大值
color: 'red' //设置标签颜色
},
],
*/axisName: {
fontSize: 12
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
lineStyle: { //#02C4E7
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
color: 'rgba(2,196,231, 0.1)',
offset: 0
},
{
color: 'rgba(2,196,231, 1)',
offset: 1
}
])
}
},
splitArea: { //坐标轴在 grid 区域中的分隔区域
show: false, //是否显示分隔区域。(不显示区域的背景色)
},
axisLine: { //坐标轴轴线相关设置。
show: false, //不显示坐标轴轴线。
}
},
series: [{
// name: 'Budget vs spending',
type: 'radar',
lineStyle: {
normal: {
color: 'none', //去掉线
width: 4
},
},
data: [{
value: [91, 87, 36, 91, 91, 91], //雷达根据数据分区
// name: 'Allocated Budget',
areaStyle: { //分隔区域的样式设置。
// 背景颜色
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{
color: 'rgba(2,196,231, 0.1)',
offset: 0
},
{
color: 'rgba(2,196,231, 0.4)',
offset: 1
}
])
},
// label: {
// show: true,
// position: "top",
// // formatter: function (params) {
// // return params.value;
// // },
// formatter: '{c}%'
// },
// label:{fontSize:12,rich:{fontSize:12}},
symbol: 'circle', //标记形状，不设置可能会变成空心的
itemStyle: { // 折线拐点标志的样式设置。
normal: {
color: 'rgba(30,159,255)', //拐点颜色
borderColor: 'rgba(30,159,255)',
// 拐点的描边颜色。[ default: '#000' ]
borderWidth: 4,
// 拐点的描边宽度，默认不描边。[ default: 0 ]
}
}
}]
}]
};myChart.setOption(option);
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart.resize();
});
},
/**
* 仪表盘
* @param {Object} dom
* @param {Object} array
*/
dashboardChart: function(dom, array, pointValue) {
var myChart4 = echarts.init(dom);var optionDashboard = {
grid: {
top: '0',
left: '3%',
right: '4%',
bottom: '0',
containLabel: true
},
series: [{
radius: '70%',
type: 'gauge',
center: ['50%', '60%'],
startAngle: 180,
endAngle: 0,
min: 1,
max: 7,
splitNumber: 6, //仪表盘刻度的分割段数。1-7,就是6段
// detail: {formatter:'{value}%'},
axisTick: { //是否显示坐标轴刻度。
show: false,
},
axisLabel: {
// distance: -80, //标签与刻度线的距离。
color: '#999',
formatter: function(a) {
for (var i = 1; i <= array.length; i++) {
if (a == i) {
return array[i]
}
}
console.log('---')
},
fontSize: 12 //文字的字体大小。
},
splitLine: { //分隔线样式。坐标轴在 grid 区域中的分隔线。
// distance: 0, //分隔线与轴线的距离。
// length: 1,
show: false,
distance: -80,
},
},
{
radius: '70%',
type: 'gauge',
center: ['50%', '60%'],
startAngle: 180,
endAngle: 0,
min: 1,
max: 7,
splitNumber: 6,
itemStyle: {
color: 'rgb(47,80,133,0.2)'
},
progress: {
show: true,
width: 10, //进度条宽度。
},
pointer: {
show: true,
width: 2, //指针宽度。
},
axisLine: { //仪表盘轴线相关配置。是否显示坐标轴轴线
lineStyle: {
width: 10, //轴线宽度。
// shadowColor: 'red',
color: [
[0.5, '#67e0e3'],
[1, '#67e0e3']
]
}
},
axisTick: { //是否显示坐标轴刻度。
// distance: -45,
// splitNumber: 5,
show: false,
},
splitLine: { //分隔线样式。坐标轴在 grid 区域中的分隔线。
distance: -10, //分隔线与轴线的距离。
length: 10,
lineStyle: {
width: 1,
color: '#999'
}
},
axisLabel: { //刻度标签。
distance: -25, //标签与刻度线的距离。
color: '#999',
formatter: function(value) {
return `${value}` + '.00'
},
fontSize: 12 //文字的字体大小。
},
anchor: {
show: false
},
// name:['111'],
title: {
show: false
},data: [{
name: '30',
value: pointValue
}],
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 20,
borderRadius: 8,
offsetCenter: [0, '-15%'],
fontSize: 28,
fontWeight: 'bolder',
// formatter: function(value) {
// return `${value}`// },
color: 'pink'
},
}
]
}myChart4.setOption(optionDashboard);
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart4.resize();
});
},
/**
* @param {Object} dom
* @param {Object} splitNum 分割段
* @param {Object} pointValue 指向值
* @param {Object} warningValue 警告值
*/
dashboardChart2: function(dom, splitNum, pointValue,warningValue) {
console.log(pointValue)
var myChart4 = echarts.init(dom);
var width=dom.clientWidth;
var height=dom.clientHeight;
var r=height/2*0.7;//半径
var xy =[width/2, height/2];//圆心坐标
var a0=180*0.6;//角度
var progressWidth=20;
console.log(r+"----------"+width+","+height+"====="+xy)
var startColor = new echarts.graphic.LinearGradient(0,0, 0,1,
[{
offset: 0,
color: "rgba(0,97,181,0.2)" //0.1是透明度
},
{
offset: 1,
color: "rgb(0,216,237, 1)" //1是透明度
}
])
var endColor = new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(155, 0, 0,1)" //0.1是透明度
},
{
offset: 1,
color: "rgba(255, 0, 0,0.4)" //1是透明度
}
])
var bgColor=startColor
if(parseFloat(pointValue)>=warningValue)
{
console.log(pointValue)
bgColor=endColor
}
/* 计算警告线的百分比 */
var changeWarning=warningValue/splitNum;
var optionDashboard = {
grid: {
top: '5%',
left: '10%',
right: '10%',
bottom: '0',
containLabel: true,
show:true,
height:height/2
},
// color: {
// image: document.getElementById('linear-pic'),//获取页面上准备的图片作为背景
// repeat: 'no-repeat'
// },
series: [{
radius: '75%',
type: 'gauge',
center: [width/2, height/2],
startAngle: 180,
endAngle: 0,
min: 0,
max: splitNum,
splitNumber: splitNum,
itemStyle: {
color: bgColor
},
progress: {
show: true,
width: progressWidth, //进度条宽度。
},
pointer: {
/*指针设置*/
// show: false
},
axisLine: { //仪表盘轴线相关配置。是否显示坐标轴轴线
lineStyle: {
width: 20, //轴线宽度。
// shadowColor: 'red',
color: [
[0.5, 'rgb(0,216,237, 0.1)'],
[1, 'rgb(189,49,48, 0.5)']
]
}
},
axisTick: { //是否显示坐标轴刻度。
// distance: -45,
// splitNumber: 5,
show: false
},
splitLine: { //分隔线样式。坐标轴在 grid 区域中的分隔线。
distance: -20, //分隔线与轴线的距离。length: 20,
lineStyle: {
width: 1,
color: '#fff'
}
},
axisLabel: { //刻度标签。
distance: -25, //标签与刻度线的距离。
color: '#999',
formatter: function(value) {
return `${value}.00`
},
fontSize: 10 //文字的字体大小。
},
anchor: {
show: false
},data: [{
name: 'M Gal',
value: pointValue,
}],
title: {
fontSize: 16,
offsetCenter: [0, '40%'],
/*,设置name位置*/
},detail: {
valueAnimation: true,
width: '60%',
lineHeight: 20,
borderRadius: 8,
offsetCenter: [0, '-15%'],
/*设置value位置*/
fontWeight: 'bolder',
color: 'yellow',
formatter: function(value) {
return '{value|' + value.toFixed(2) + '}\n{bg|}\n{unit|K Ton}'},
rich: {
value: {
color: 'blue',
fontSize: 20,
},
unit: {
color: 'green',
fontSize: 12,
},
bg: {
backgroundColor: {
image: 'https://img.tukuppt.com/png_preview/00/29/59/pgvoY5l0vR.jpg!/fw/780'
},
// shadowColor : 'red',
// shadowOffsetX:0,
// shadowOffsetY:0,
// shadowBlur:50,
width: '100%',
height: 20,},
}
},
}],
anchor :{
},
tooltip:{
trigger: "item",
backgroundColor: "transparent",
// renderMode:'<div style="height:200px;width:200px;backgroundColor:red;border:1px solid #000;></div>',
position: function (point, params, dom, rect, size) {
// console.log(point)
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
console.log(r+"--圆心：----"+xy)
// 圆心坐标：xy[150.5,150.5] ；r=105.35
// 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
var angle=100;//角度
var x1 = xy[0] + r * Math.cos(angle * 3.14 /180 )
var y1 = xy[1] + r * Math.sin(angle * 3.14 /180 )
console.log(x1+"----"+y1)
var resultX=xy[0]+(xy[0]-x1);
var resultY=xy[1]-(y1-xy[1]);
if(angle>90){
// leftX=progressWidth
resultX=resultX+20;
// resultY=resultY-20;
}else{
// resultX=resultX+20;
resultY=resultY-20;
}
resultY=resultY-progressWidth
return [resultX,resultY]
},
alwaysShowContent:true,
formatter:function(params){
console.log(params)
return `<div id="toolID" style="height:5px;width:5px;backgroundColor:red;border:1px solid #000;">AAA</div>`
// return '123'
}
}
}
/*修改设置警告线*/
optionDashboard.series[0].axisLine.lineStyle.color[0][0]=changeWarning
setInterval(function () {
var value = +(Math.random() * 6).toFixed(2);
myChart4.setOption({
series: [
{
data: [
{
value: value
}
]
}
]
});
}, 2000);
myChart4.setOption(optionDashboard);
// myEcharts.dispatchAction({
// type: 'showTip',
// seriesIndex:0, // 显示第几个series
// dataIndex: 1 // 显示第几个数据
// });
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart4.resize();
});
}}
先引入 myEcharts.js文件，然后调用圆柱方法
隔一个圆柱变个颜色
//先引入echarts，再new
let lcolor=new echarts.graphic.LinearGradient(1, 1, 0, 0,
[{
offset: 0,
color: '#ffffff'
},
{
offset: 1,
color:'pink' //offset是透明度
}
],false)
let dataZhu=[1030,
{
value: 200,
itemStyle: {
color: lcolor
}
},84, {
value: 568,
itemStyle: {
color: lcolor
}
}, 689
]
myEcharts.zhuZong(this.$refs.box,['1月','2月','3月', '4月', '5月'],dataZhu)
调用折线图3：
const lineColor2 = ['#499dff', '#f5ca34', '#51c9cd','#f7997b', '#8e94f1', '#fc54cd']
getListData().then(res => {
console.log(res)
if(res.data&&res.data.xAxis&&res.data.series){
const list=res.data.xAxis.data
var lineData = res.data.series myEcharts.brokenLine3(document.getElementById('line_box2'),list,lineColor2,lineData,true)
}
})