封装类(echarts柱形图)_~半句晚安。的博客-CSDN博客
效果图:
polylineColumns.js
export default class {
/**
* @description: 折线柱形图
* @param {*} echarts(echarts原型对象)
* @param {*} id(DOM的id)
* @param {*} data(数据结构)
* @param {*} colors(图标颜色(渐变处理,数组两个颜色相同为非渐变))
* @param {*} myLegend(图例)
* @return {*}
*
* @调用方法: new RiskTree(this.$echarts , "DOM的id" , [["沙河", 5, 7, 9, 12.5],......] , [['柱形颜色','柱形颜色']],['product','农机数量','作业面积'])
*/
constructor(echarts, id, data, colors, myLegend) {
this.echarts = echarts;
let option = this.getOption(data, colors, myLegend)
var myChart = echarts.init(document.getElementById(id));
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
getOption(data, colors, myLegend) {
let seriesArr = []
seriesArr.push(
{
// yAxisIndex :0 代表绑定第一个y轴 1代表第二个....
type: 'bar', name: myLegend[1], yAxisIndex: 0, barWidth: 30, itemStyle: {
//柱条渐变色
color: new this.echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{ offset: 0, color: colors[0][0] },
{ offset: 1, color: colors[0][1] }
]
),
barBorderRadius: [25, 25, 0, 0]
},
},
{
type: 'line', name: myLegend[2], yAxisIndex: 1, itemStyle: {
//柱条渐变色
color: new this.echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{ offset: 0, color: colors[1][0] },
{ offset: 1, color: colors[1][1] }
]
)
},
}
)
let option = {
legend: {
bottom: 35,
textStyle: {
color: "#fff"
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
},
grid: {
x: 40,
y: 10,
x2: 40,
y2: 80,
borderWidth: 10
},
dataset: {
dimensions: myLegend,
source: data
},
xAxis: {
type: 'category',
splitArea: {//背景
show: true,
areaStyle: {
color: ["rgb(255,255,255,0)", "rgb(255,255,255,0)"]
}
},
axisLine: { //横轴样式
lineStyle: {
color: '#ccc'
},
},
axisTick: {
show: false,
borderColor: '#051f32'
},
axisLabel: {
show:true,
interval:0,
textStyle: {
color: "#fff"
}
},
coordinateSystem: 'cartesian2d', xAxisIndex: 1,
},
yAxis: [
{
//如果要自己定义刻度线可以在这个地方定义
min: 0,
//比最大值多一点
max: function (value) {
console.log(value)
return value.max + (value.max * 0.3)
},
axisTick: {
show: false,
},
axisLabel: {
show:true,
interval:0,
textStyle: {
color: "#fff"
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#0f5071'],
width: 1,
type: 'solid',
},
},
},
{
type: 'value',
min: 0,
max: function (value) {
console.log(value)
return value.max + (value.max * 0.3)
},
axisLabel: {
textStyle: {
color: "#fff"
},
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
color: ['#0f5071'],
width: 1,
type: 'solid',
},
},
},
],
series: seriesArr
};
return option;
}
}
html
<div class="RiskTree" id="RiskTree"></div>
vue
import RiskTree from "./components/polylineColumns.js";
new RiskTree(
this.$echarts,
"RiskTree",
arr,
[
["#00C4E3", "#0090f66f"],
["#FBBD28", "#FBBD28"],
],
["product", "农机数量", "作业面积"]
);