下面是折线图的简单介绍:
请看代码:
折线图:子组件
<template>
<div class="histogram" :style="{ width: lineEchartsData.width }">
<div
class="histogramBar"
:id="id"
:style="{ width: '100%', height: lineEchartsData.lineEchartsHeight }"
></div>
</div>
</template>
<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
props: {
lineEchartsData: {
type: Object,
},
},
data() {
return {
mylineEcharts: "",
};
},
created() {
_c.id++;
this.id = "c_ineEchart_" + _c.id;
},
mounted() {
// 初始化echarts
this.$nextTick(()=>{
this.initChart();
})
// 监听浏览器变化初始化echarts
window.addEventListener('resize',this.initChart,false);
},
beforeDestroy () {
window.removeEventListener('resize', this.initChart)
},
methods: {
initChart() {
var chartDom = document.getElementById(this.id);
if (
this.mylineEcharts != null &&
this.mylineEcharts != "" &&
this.mylineEcharts != undefined
) {
this.mylineEcharts.dispose(); //销毁
}
this.mylineEcharts = echarts.init(chartDom);
// 监听页面变化图表自适应
this.mylineEcharts.resize()
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
xAxis:this.lineEchartsData.xAxis,
yAxis: this.lineEchartsData.yAxis,
series:this.lineEchartsData.series
};
this.mylineEcharts.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
</style>
父组件:
<template>
<div class="indecators-area">
<div class="indicators-line">
<LineEchart class="histogram" :lineEchartsData="lineEchartsData" />
</div>
</div>
</template>
<script>
import LineEchart from "@/components/lineEchart.vue";
export default {
components: {
LineEchart,
},
data() {
return {
lineEchartsData: {
width: 100 + "%", //柱状图盒子宽度
lineEchartsHeight: "24.752vw",
xAxis: {
type: "category",
boundaryGap: false,
data: ["2015", "2016", "2017", "2018", "2019", "2020"],
},
yAxis: {
type: "value",
splitNumber: 1,
min: 0,
max: 100000,
interval: 25000,
axisLabel: {},
},
series: [
{
data: [18921.85, 33605, 62602.47, 76669, 76734.68, 96010],
type: "line",
smooth: false, //折点是圆弧状的
showSymbol: true,
symbol: "circle", //折点设定为实心点
symbolSize: 4, //设定实心点的大小
itemStyle: {
color: "#1492FF", //折点颜色
lineStyle: {
color: "#1492FF", //折线颜色
},
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1, //自定义颜色,渐变色填充折线图区域
colorStops: [
{
offset: 0,
color: "#A2D0F8", // 0% 处的颜色
},
{
offset: 1,
color: "#F1F8FF", // 100% 处的颜色
},
],
},
},
},
],
},
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>