| | <template> |
---|
| | <div :id="id" style="width: 100%; height: 100%"></div> |
---|
| | </template> |
---|
| | <script> |
---|
| | import * as echarts from "echarts"; |
---|
| | import { guid } from "@/utils/ruoyi"; |
---|
| | import { reactive, toRefs, onMounted, watch } from "vue"; |
---|
| | import * as echarts from 'echarts'; |
---|
| | import { guid } from '@/utils/ruoyi'; |
---|
| | import { reactive, toRefs, onMounted, watch } from 'vue'; |
---|
| | export default { |
---|
| | name: "line-chart", |
---|
| | name: 'line-chart', |
---|
| | props: { |
---|
| | data: Object, |
---|
| | refresh: Number, |
---|
| | }, |
---|
| |
---|
| | const init = () => { |
---|
| | let chartDom = echarts.init(document.getElementById(allData.id)); |
---|
| | |
---|
| | var shadowYData = [100, 100]; |
---|
| | var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"]; |
---|
| | var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF']; |
---|
| | var barBottomColor = [ |
---|
| | "RGBA(154, 102, 125, 0.6)", |
---|
| | "RGBA(17, 109, 182, 0.6)", |
---|
| | "RGBA(27, 152, 136, 0.6)", |
---|
| | "RGBA(126, 138, 92, 0.6)", |
---|
| | "RGBA(10, 162, 178, 0.6)", |
---|
| | 'RGBA(154, 102, 125, 0.6)', |
---|
| | 'RGBA(17, 109, 182, 0.6)', |
---|
| | 'RGBA(27, 152, 136, 0.6)', |
---|
| | 'RGBA(126, 138, 92, 0.6)', |
---|
| | 'RGBA(10, 162, 178, 0.6)', |
---|
| | ]; |
---|
| | var barWidth = 20; |
---|
| | var option; |
---|
| | option = { |
---|
| | color: ["#3FFFC2", "#FFF21C"], |
---|
| | color: ['#3FFFC2', '#FFF21C'], |
---|
| | tooltip: { |
---|
| | trigger: "axis", |
---|
| | |
---|
| | formatter: (params) => { |
---|
| | trigger: 'axis', |
---|
| | |
---|
| | formatter: params => { |
---|
| | // console.log(params); |
---|
| | var relVal = "" + params[0].name; |
---|
| | var relVal = '' + params[0].name; |
---|
| | for (var i = 0, l = params.length; i < l; i++) { |
---|
| | if (params[i].seriesName) { |
---|
| | let unit = params[i].seriesName == "数量" ? "起" : "个"; |
---|
| | relVal += |
---|
| | "<br/>" + |
---|
| | params[i].marker + |
---|
| | params[i].seriesName + |
---|
| | " " + |
---|
| | params[i].value + |
---|
| | unit; |
---|
| | let unit = params[i].seriesName == '数量' ? '起' : '个'; |
---|
| | relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit; |
---|
| | } |
---|
| | } |
---|
| | return relVal; |
---|
| | }, |
---|
| | }, |
---|
| | grid: { |
---|
| | top: 50, |
---|
| | bottom: 20, |
---|
| | bottom: 25, |
---|
| | }, |
---|
| | xAxis: [ |
---|
| | { |
---|
| | type: "category", |
---|
| | type: 'category', |
---|
| | axisLine: { |
---|
| | show: false, |
---|
| | lineStyle: { |
---|
| | width: 2, |
---|
| | color: "#58b2ed", |
---|
| | color: '#58b2ed', |
---|
| | }, |
---|
| | }, |
---|
| | splitLine: { |
---|
| | show: false, |
---|
| |
---|
| | axisTick: { |
---|
| | show: false, |
---|
| | }, |
---|
| | axisLabel: { |
---|
| | color: "rgba(255,255,255,1)", |
---|
| | color: 'rgba(255,255,255,1)', |
---|
| | fontSize: 16, |
---|
| | fontFamily: "AlibabaPuHuiTi", |
---|
| | fontFamily: 'AlibabaPuHuiTi', |
---|
| | formatter: function (params) { |
---|
| | var str = ""; // 最终拼接成的字符串 |
---|
| | var str = ''; // 最终拼接成的字符串 |
---|
| | var paramsLen = params.length; // 获取每项文字的个数 |
---|
| | var len = 3; // 每行能显示的字的个数(根据实际情况自己设置) |
---|
| | var rowNumber = Math.ceil(paramsLen / len); // 换行的话,需要显示几行,向上取整 |
---|
| | if (paramsLen > len) { |
---|
| | //大于设定的len就换行,不大于就不变化 |
---|
| | for (var i = 0; i < rowNumber; i++) { |
---|
| | var temp = ""; // 表示每一次截取的字符串 |
---|
| | var temp = ''; // 表示每一次截取的字符串 |
---|
| | var start = i * len; // 开始截取的位置 |
---|
| | var end = start + len; // 结束截取的位置 |
---|
| | if (i == rowNumber - 1) { |
---|
| | // 最后一次不换行 |
---|
| | temp = params.substring(start, paramsLen); |
---|
| | } else { |
---|
| | // 每一次拼接字符串并换行 |
---|
| | temp = params.substring(start, end) + "\n"; |
---|
| | temp = params.substring(start, end) + '\n'; |
---|
| | } |
---|
| | str += temp; // 最终拼成的字符串 |
---|
| | } |
---|
| | } else { |
---|
| |
---|
| | }, |
---|
| | ], |
---|
| | yAxis: [ |
---|
| | { |
---|
| | name: "数量(起)", |
---|
| | type: "value", |
---|
| | name: '数量(起)', |
---|
| | type: 'value', |
---|
| | axisLabel: { |
---|
| | color: "#3FFFC2", |
---|
| | color: '#3FFFC2', |
---|
| | show: true, |
---|
| | }, |
---|
| | nameTextStyle: { |
---|
| | color: "#3FFFC2", |
---|
| | color: '#3FFFC2', |
---|
| | }, |
---|
| | splitLine: { |
---|
| | lineStyle: { |
---|
| | type: "dashed", |
---|
| | color: "#3FFFC2", |
---|
| | type: 'dashed', |
---|
| | color: '#3FFFC2', |
---|
| | }, |
---|
| | }, |
---|
| | alignTicks: true, |
---|
| | }, |
---|
| |
---|
| | height: 4, |
---|
| | bottom: 18, |
---|
| | start: 0, |
---|
| | end: 100, |
---|
| | handleSize: "100%", |
---|
| | fillerColor: "#94FA41", |
---|
| | borderColor: "transparent", |
---|
| | backgroundColor: "rgba(148, 250, 65, 0.2)", |
---|
| | handleSize: '100%', |
---|
| | fillerColor: '#94FA41', |
---|
| | borderColor: 'transparent', |
---|
| | backgroundColor: 'rgba(148, 250, 65, 0.2)', |
---|
| | handleStyle: { |
---|
| | color: "#94FA41", |
---|
| | color: '#94FA41', |
---|
| | }, |
---|
| | moveHandleSize: 0, |
---|
| | textStyle: { |
---|
| | color: "#fff", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | type: "inside", |
---|
| | color: '#fff', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | type: 'inside', |
---|
| | show: true, |
---|
| | height: 15, |
---|
| | start: 1, |
---|
| | end: 35, |
---|
| | }, |
---|
| | ], |
---|
| | series: [ |
---|
| | { |
---|
| | name: "数量", |
---|
| | type: "pictorialBar", |
---|
| | name: '数量', |
---|
| | type: 'pictorialBar', |
---|
| | symbolSize: [barWidth, 10], |
---|
| | symbolOffset: [0, -6], |
---|
| | symbolPosition: "end", |
---|
| | symbolPosition: 'end', |
---|
| | z: 12, |
---|
| | itemStyle: { |
---|
| | normal: { |
---|
| | color: function (params) { |
---|
| |
---|
| | // data: props.data.yAxis, |
---|
| | // stack: "check", |
---|
| | // }, |
---|
| | { |
---|
| | name: "", |
---|
| | type: "bar", |
---|
| | name: '', |
---|
| | type: 'bar', |
---|
| | barWidth: barWidth, |
---|
| | barGap: "10%", // Make series be overlap |
---|
| | barCateGoryGap: "10%", |
---|
| | barGap: '10%', // Make series be overlap |
---|
| | barCateGoryGap: '10%', |
---|
| | itemStyle: { |
---|
| | normal: { |
---|
| | color: function (params) { |
---|
| | return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
---|
| |
---|
| | }; |
---|
| | watch( |
---|
| | () => props.refresh, |
---|
| | () => { |
---|
| | console.log(props, "propspropsprops"); |
---|
| | console.log(props, 'propspropsprops'); |
---|
| | if (allData.chartDom) { |
---|
| | allData.chartDom.dispose(); |
---|
| | allData.chartDom = null; |
---|
| | } |
---|
| |
---|
| | } |
---|
| | ); |
---|
| | onMounted(() => { |
---|
| | init(); |
---|
| | window.addEventListener("resize", resizeTheChart); |
---|
| | window.addEventListener('resize', resizeTheChart); |
---|
| | }); |
---|
| | return { |
---|
| | ...toRefs(allData), |
---|
| | resizeTheChart, |
---|
| |
---|
| | |
|