图二 配置再最后
//父组件
<div style="width: 100%;height: 50%;padding-top: 4.5rem;">
<LineEcharts
:id="'2'"
:chart-data="humidity"
:class-name="'湿度'"
/>
</div>
<script>
export default {
components: {
LineEcharts
},
data （）{
return{
humidity: {
xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
ydata: [82, 43, 90, 34, 90, 33, 32],
},
}
}
</script>
//子组件
<template>
<div
:id="id"
:class="className" //传的值可以来设置echarts的标题 单位等 看自己业务需求
:style="{ height: height, width: width }"
/>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
chartData: {
type: Object,
required: true
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
}
},
methods: {
initChart () {
this.chart = echarts.init(document.getElementById(this.id))
this.setOptions(this.chartData)
},
setOptions (chartData) {
if (this.id === "1") {
this.chart.setOption({
xAxis: {
type: 'category',
data: chartData.xdata,
axisTick: {
show: false
},
axisLine: {
show: true,
},
z: 10,
axisLabel: { // 设置x轴的字
show: true,
interval: 0, // 使x轴横坐标全部显示
textStyle: {// x轴字体样式
margin: 15
}
},
},
// legend: {
// data: ['%'],
// left: 10,
// top: 10
// },
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: { // 网格线
lineStyle: {
type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线
},
show: false // 隐藏或显示
},
axisLabel: {
// formatter: '{value}级'
}
},
title: {
// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
subtext: "单位（级）",
left: 43, // 距离左边位置
top: -12, // 距离上面位置
subtextStyle: { // 设置二级标题的样式
color: "#000"
}
},
grid: {
top: '7%',
left: '%',
right: '1%',
bottom: '1%',
// show: 'true',
backgroundColor: '#9999',
containLabel: true
},
dataZoom: [
{
type: 'inside',
},
],
series: [
{
type: 'line',
data: chartData.ydata,
smooth: true,
symbol: "circle",
symbolSize: 8,
itemStyle: {
normal: {
color: "#31AE4F",
borderColor: '#ffffff', // 拐点边框颜色
borderWidth: 2, // 拐点边框大小
label: {
show: true, // 在折线拐点上显示数据
position: 'bottom',
formatter: function (params) { // 再纵轴加上单位
// console.log("params echarts", params);
return params.value + "级"
}
},
},
},
lineStyle: {
color: "#2fc49a", // 折线的颜色
}
}
],
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#E8F6EB' // 0% 处的颜色
}, {
offset: 1, color: '#F8FDFC' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}, true)
}
}
}
图二配置
else if (this.id === "5") {
this.chart.setOption({
// tooltip: {
// trigger: 'axis',
// },
grid: {
top: '7%',
left: '1%',
right: '1%',
bottom: '1%',
// show: 'true',
backgroundColor: '#9999',
containLabel: true
},
tooltip: {
trigger: "axis",
formatter: '光照强度<br/> {c0}万lx'
},
title: {
subtext: "单位（万lx）",
left: 43, // 距离左边位置
top: -12, // 距离上面位置
subtextStyle: { // 设置二级标题的样式
color: "#000"
}
},
dataZoom: [
{
type: 'inside',
},
],
xAxis: {
type: 'category',
data: chartData.xdata,
// triggerEvent: true,
// axisTick: {
// show: false
// },
// axisLine: {
// show: false
// },
// z: 10
axisTick: {
alignWithLabel: true,
show: false,
},
axisLine: {
lineStyle: {
// color: '#D3EBFF',
type: 'solid'
},
},
axisLabel: {
show: true,
interval: 0, // 使x轴横坐标全部显示
textStyle: {// x轴字体样式
margin: 15
}
}
},
yAxis: {
type: 'value',
name: '单位：lx',
min: 0,
interval: 100,
nameTextStyle: {
color: '#EC9A5C',
fontSize: 12,
nameLocation: 'start',
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
// color: '#EABE5C'
},
// axisLabel: {
// // formatter: '{value}℃'
// }
},
axisLabel: {
textStyle: {
// color: '#EC9A5C',
// fontSize: '18'
},
}
},
series: [
{
emphasis: {
itemStyle: {
opacity: 1
}
},
data: chartData.ydata,
type: 'pictorialBar', // 这是圆锥图
barCategoryGap: '15', /* 多个并排柱子设置柱子之间的间距*/
// symbol:
// 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',//这是很尖的圆锥
symbol: 'triangle',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#FBEBBD' // 0% 处的颜色
},
{
offset: 0.5, color: '#F3D371' // 100% 处的颜色
},
{
offset: 1, color: '#E9BA23' // 100% 处的颜色
}],
global: false, // 缺省为 false
},
formatter: function (params) { // 再纵轴加上单位
// console.log("params echarts", params);
return params.value + "℃"
}
},
},
z: 10,
formatter: function (data) {
// console.log("data00000", data);
if (data.length > 1) {
return data[0].name + '<br/>' + data[0].value + '%<br />';
}
}
}
]
}, true)
}
