本人在工作中老是使用echarts的柱状图和折线图有时候还会使用他们的混合 所以我写了这个组件
安装echarts
npm install echarts--save如何引用组件
柱状图和折线图混合使用
<template>
<div class="home">
<lineBarCharts :chartData="barData" height="500px" width="700px" />
</div>
</template>
<script>
import lineBarCharts from '@/components/lineBarCharts.vue'
export default {
name: 'HomeView',
components: {
lineBarCharts
},
data() {
return {
barData: {
// 可选参数 yAxisLine 几条y轴 如果两条，则对应要写yIndex
yAxisLine: [
{ name: "单位/亿", show: true },
{ name: "%", show: true ,formatter:"{value}%"}
],
// 可选参数 legend
legend: {
show: true,
top: 0,
right: 20
},
// 可选参数 toolTip
toolTip:{
// a0第一条数据 a1第二条数据 a3 第三条数据
formatter:'{b0}<br/>{a0}:{c0}<br /> {a1}:{c1}%<br />{a2}:{c2}'
},
yAxisDataArray: [{
name: "人口数量",//如果需要legend即图例是必需的
type: 'bar',//必须要写 bar 或者 line
// 设置柱状图粗细
// barWidth: 15,
data: [1150, 1200, 1366, 1521, 1655, 2000, 2016, 2080,],//必须
// 可选参数 yAxisIndex color showLabel
// yAxisIndex: 0,//只有一条y轴时，可以不写
// color: '#6e06f5',
showLabel:true//是否在柱状图的最上面显示数值
},
{
name: "人口增长速度",
type: 'line',
data: [5.1, 3.2, 4.6, 8.9, 11.6, 15, 18.9, 10.3],
yAxisIndex: 1,
// color: "#FF3D00",
showLabel:false
},
{
name: "人口死亡数量",
type: 'bar',
data: [200,250,263,221,301,298,254,400],
// barWidth:15,
// color: "#06f526",
showLabel:true
}
],
xAxis:{
data: [2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023],
// 可选参数 axisLabel
axisLabel:{
// type:"rotate",
// rotateAngel:20,
// 标签隔几个显示一个
interval:0,
type:"changeRow",
textRowLength:5
}
}
}
}
}
}
</script>折线图
把上面的数据换成这个就行了
barData: {
xAxis: {
data: [2016, 2017, 2018, 2019, 2020, 2021, 2022],
},
yAxisDataArray: [
{
name: '1',
type: 'line',
data: [1, 2, 3, 4, 5, 6, 7]
},
{
name: '2',
type: 'line',
data: [2, 3, 4, 5, 6, 7, 8]
},
{
name: '3',
type: 'line',
data: [3, 4, 5, 6, 7, 8, 9]
},
]
},组件中的内容
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "260px",
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({
yAxisDataArray,
xAxis,
yAxisLine,
legend,
toolTip
} = {}) {
this.chart.setOption({
grid: {
left: 0,
right: 0,
bottom: 0,
top: 50,
containLabel: true,
},
legend: (() => {
let baseLegend = {
show: true,
type: 'scroll',
}
if (!legend) {
return baseLegend
} else {
if (!legend.show) {
return
}
return legend
}
})(),
tooltip: (() => {
let baseSet = {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
}
if(toolTip){
baseSet.formatter = toolTip.formatter
}
return baseSet
})(),
xAxis: [{
type: "category",
data: xAxis.data,
splitLine: {
show: false,
},
splitArea: {
show: false,
},
axisPointer: {
type: "shadow"
},
axisLine: {
lineStyle: {
type: "solid",
color: "#000", //左边线的颜色
width: "1", //坐标线的宽度
},
},
axisLabel: (() => {
let baseSet = {
color: "#000", //坐标值得具体的颜色
}
let max = 0
let formatter = function(value) //X轴的内容
{
var ret = ""; //拼接加\n返回的类目项
// max = 6; //每行显示的文字字数
var val = value.length; //X轴内容的文字字数
var rowN = Math.ceil(val / max); //需要换的行数
if (rowN > 1) //判断 如果字数大于2就换行
{
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * max; //开始截取的位置
var end = start + max; //结束截取的位置
temp = value.substring(start, end) + "\n";
ret += temp; //最终的字符串
}
return ret;
} else {
return value
}
}
if(xAxis.axisLabel){
if(typeof( xAxis.axisLabel.interval )== 'number'){
baseSet.interval = xAxis.axisLabel.interval
}
if(xAxis.axisLabel.type){
if(xAxis.axisLabel.type == 'rotate'){
baseSet.rotate = xAxis.axisLabel.rotateAngel||20
}else if(xAxis.axisLabel.type == 'changeRow'){
max = xAxis.axisLabel.textRowLength||6
baseSet.formatter = formatter
}
}
}
return baseSet
})(),
},],
yAxis: (() => {
let yAixs = []
let baseyAxis = {
type: "value",
position: "left",
show: true,
alignTicks: true,
min: 0,
// 坐标轴名字
name: '',
/* start end center */
nameLocation: 'end',
splitLine: {
show: true,
},
splitArea: {
show: false,
},
axisLine: {
show:true,
lineStyle: {
type: "solid",
color: "#000", //左边线的颜色
width: "1", //坐标线的宽度
},
},
axisLabel: {
color: "#000", //坐标值得具体的颜色
},
}
if(yAxisLine&&yAxisLine.length){
for (var i = 0; i < yAxisLine.length; i++) {
if (i == 0) {
baseyAxis.name = yAxisLine[i].name
baseyAxis.show = yAxisLine[i].show
if(yAxisLine[i].formatter){
baseyAxis.axisLabel.formatter =yAxisLine[i].formatter
}
yAixs.push(JSON.parse(JSON.stringify(baseyAxis)))
} else if(i == 1) {
baseyAxis.name = yAxisLine[i].name
baseyAxis.show = yAxisLine[i].show
if(yAxisLine[i].formatter){
baseyAxis.axisLabel.formatter =yAxisLine[i].formatter
}
baseyAxis.position = 'right'
yAixs.push(JSON.parse(JSON.stringify(baseyAxis)))
}
}
return yAixs
}
return baseyAxis
})(),
series: (function () {
let serie = []
let baseSet = {
name: 'defaultName',
type: 'line',
data: [],
yAxisIndex: 0,
itemStyle: {
// color: '#ffaa00'
},
label:{
show:true,
position:'top'
}
}
for (var i = 0; i < yAxisDataArray.length; i++) {
baseSet.name = yAxisDataArray[i].name
baseSet.type = yAxisDataArray[i].type
baseSet.itemStyle.color = yAxisDataArray[i].color
baseSet.label.show = yAxisDataArray[i].showLabel
if (yAxisDataArray[i].type == 'bar') {
baseSet.barWidth = yAxisDataArray[i].barWidth
}
baseSet.data = yAxisDataArray[i].data
if(yAxisLine){
if(yAxisLine.length >= 2){
baseSet.yAxisIndex = yAxisDataArray[i].yAxisIndex
}
}
serie.push(JSON.parse(JSON.stringify(baseSet)))
}
return serie
})()
});
},
},
};
</script>
有疑问可以问我
效果图
