|
|
@@ -13,22 +13,14 @@ export default {
|
|
|
name: "lineChartMainPage",
|
|
|
props: {
|
|
|
id: {
|
|
|
- default: "lineChartMainPageA",
|
|
|
+ default: "lineChartMainPage",
|
|
|
type: String,
|
|
|
},
|
|
|
- LineChartData: {
|
|
|
- text: String, //标题 不需要标题可不传
|
|
|
- titleSize: {
|
|
|
- //标题大小
|
|
|
- type: Number,
|
|
|
- default: 20,
|
|
|
+ dataList: {
|
|
|
+ default: function () {
|
|
|
+ return [];
|
|
|
},
|
|
|
- download: {
|
|
|
- //是否显示下载按钮
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- data: [],
|
|
|
+ type: Array,
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
@@ -36,168 +28,125 @@ export default {
|
|
|
tipData: [], //线数据
|
|
|
showData: [], //展示数据
|
|
|
charts: "",
|
|
|
- // text: this.LineChartData.text, //大标题
|
|
|
- // titleSize: this.LineChartData.titleSize, //标题大小
|
|
|
- // download: this.LineChartData.download,
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- text() {
|
|
|
- return this.LineChartData.text;
|
|
|
- },
|
|
|
- titleSize() {
|
|
|
- return this.LineChartData.titleSize;
|
|
|
- },
|
|
|
- download() {
|
|
|
- return this.LineChartData.download;
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ dataList(val) {
|
|
|
+ if (val.length > 0) {
|
|
|
+ this.initStateList();
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // this.drawLine();
|
|
|
- // import * as echarts from "echarts";
|
|
|
-
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- this.charts = this.$echarts.init(document.getElementById(this.id));
|
|
|
|
|
|
- let option = {
|
|
|
- xAxis: {
|
|
|
- data: [
|
|
|
- "星期一",
|
|
|
- "星期二",
|
|
|
- "星期三",
|
|
|
- "星期四",
|
|
|
- "星期五",
|
|
|
- "星期六",
|
|
|
- "星期日",
|
|
|
- ],
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [10, 22, 28, 23, 19, 99, 81],
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "#3397FF",
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- top: '10%',
|
|
|
- left: '40px',
|
|
|
- right: '40px',
|
|
|
- bottom: '10%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- };
|
|
|
- this.charts.setOption(option);
|
|
|
- },
|
|
|
methods: {
|
|
|
- //绘制图表
|
|
|
- drawLine() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- let id = "echartBar" + Math.random() * 1000;
|
|
|
- this.$el.setAttribute("id", id);
|
|
|
- let myChartContainer = document.getElementById(id);
|
|
|
- // let myChartChina = echarts.init(myChartContainer);
|
|
|
- let myChartChina = echarts.init("aa");
|
|
|
- // 绘制图表
|
|
|
- let optionMap = {
|
|
|
- //折线图配置数据
|
|
|
- color: ["#6cacaf", "#e4a526", "#e4391d", "#a1cb37", "#8c97cb"],
|
|
|
+ initStateList() {
|
|
|
+ let xData = [];
|
|
|
+ let yData = [];
|
|
|
+ for (let index = 0; index < this.dataList.length; index++) {
|
|
|
+ const element = this.dataList[index];
|
|
|
+ xData.push(element.toDate.slice(5));
|
|
|
+ yData.push(element.num);
|
|
|
+ }
|
|
|
+
|
|
|
+ let option = {
|
|
|
title: {
|
|
|
- x: "center",
|
|
|
- text: this.text,
|
|
|
- textStyle: {
|
|
|
- fontSize: this.titleSize,
|
|
|
- },
|
|
|
+ text: "暂无数据",
|
|
|
+ show: this.dataList.length === 0,
|
|
|
+ left: "center",
|
|
|
+ top: "center",
|
|
|
},
|
|
|
tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: [30],
|
|
|
- data: this.tipData,
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show: this.download,
|
|
|
- top: [5],
|
|
|
- right: [20],
|
|
|
- feature: {
|
|
|
- saveAsImage: {},
|
|
|
+ //提示框，可以在全局也可以在
|
|
|
+ trigger: "item", //提示框的样式
|
|
|
+ formatter: "{b}: {c}",
|
|
|
+ color: "#000", //提示框的背景色
|
|
|
+ textStyle: {
|
|
|
+ //提示的字体样式
|
|
|
+ color: "#ffffff",
|
|
|
},
|
|
|
+ confine: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
- interval: ["0"], //标签显示间隔
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
- data: [
|
|
|
- "1月",
|
|
|
- "2月",
|
|
|
- "3月",
|
|
|
- "4月",
|
|
|
- "5月",
|
|
|
- "6月",
|
|
|
- "7月",
|
|
|
- "8月",
|
|
|
- "9月",
|
|
|
- "10月",
|
|
|
- "11月",
|
|
|
- "12月",
|
|
|
- ], //x轴数据
|
|
|
+ data: xData,
|
|
|
},
|
|
|
yAxis: {
|
|
|
- name: "(万元)",
|
|
|
- nameGap: [10],
|
|
|
- type: "value",
|
|
|
+ minInterval: 1,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: yData,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 1.5,
|
|
|
+ color: "#3397FF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(51, 151, 255, 0.42)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(170, 197, 255, 0.12)",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#3397FF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: "10%",
|
|
|
+ left: "20px",
|
|
|
+ right: "20px",
|
|
|
+ bottom: "10%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- series: this.showData,
|
|
|
- };
|
|
|
- myChartChina.setOption(optionMap);
|
|
|
- window.onresize = function () {
|
|
|
- myChartChina.resize();
|
|
|
};
|
|
|
+ this.charts.setOption(option);
|
|
|
},
|
|
|
},
|
|
|
- watch: {
|
|
|
- "LineChartData.data": function (val) {
|
|
|
- this.tipData = [];
|
|
|
- this.showData = [];
|
|
|
- for (let i = 0; i < val.length; i++) {
|
|
|
- let obj = {
|
|
|
- //折线图需要的数据结构
|
|
|
- name: "",
|
|
|
- type: "line",
|
|
|
- data: [],
|
|
|
- };
|
|
|
- obj.name = val[i].name;
|
|
|
- this.tipData.push(val[i].name);
|
|
|
- for (let j = 0; j < val[i].monthlySales.length; j++) {
|
|
|
- obj.data.push(parseFloat(val[i].monthlySales[j]));
|
|
|
- }
|
|
|
- this.showData.push(obj);
|
|
|
- }
|
|
|
- this.drawLine();
|
|
|
- },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.charts = this.$echarts.init(document.getElementById(this.id));
|
|
|
+
|
|
|
+ this.initStateList();
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.charts.resize();
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
+
|
|
|
destroyed() {
|
|
|
- console.log("destroyed");
|
|
|
+ // console.log("destroyed");
|
|
|
this.charts.dispose();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
<style lang='less' scoped>
|
|
|
.linechart {
|
|
|
margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
zhangliang2
