|
|
@@ -48,345 +48,148 @@ export default {
|
|
|
beforeMount() { }, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
init_hysyEchart() {
|
|
|
+
|
|
|
var dom = document.getElementById("hysyEchart");
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
- const xData = ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海']
|
|
|
- // 右侧的立体柱子
|
|
|
- const topValue = [10, 3, 4, 6, 8, 10, 6, 8, 10]
|
|
|
- const bottomValue = [15, 18, 3, 4, 6, 10, 4, 6, 10]
|
|
|
-
|
|
|
- // 顶部的柱子立体面
|
|
|
- const topImg = bottomValue
|
|
|
- .reduce((acc, curr, index) => {
|
|
|
- acc.push(curr + topValue[index])
|
|
|
- return acc
|
|
|
- }, [])
|
|
|
- .flat()
|
|
|
- // 注意：给series中的data赋值时需要注意参考注释中的内容顺序
|
|
|
- // series[0].data = bottomValue
|
|
|
- // series[1].data = topValue
|
|
|
- // series[3].data = bottomValue
|
|
|
- // series[4].data = topImg
|
|
|
- let option = {
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- grid: {
|
|
|
- left: '5%',
|
|
|
- right: '4%',
|
|
|
- bottom: '30%',
|
|
|
- top: '15%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['计划收储', '完成收储'], //图例名称
|
|
|
- right: '30%', //调整图例位置
|
|
|
- top: '80%', //调整图例位置
|
|
|
- itemWidth: 12,
|
|
|
- itemHeight: 12, //修改icon图形大小
|
|
|
- icon: 'rectangle', //图例前面的图标形状
|
|
|
- textStyle: { //图例文字的样式
|
|
|
- color: '#ccc', //图例文字颜色
|
|
|
- fontSize: 12 //图例文字大小
|
|
|
- }
|
|
|
+ var myChart = window.echarts.init(dom);
|
|
|
+ // Mock数据
|
|
|
+ const mockData = {
|
|
|
+ xdata: ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海'],
|
|
|
+
|
|
|
+ result: [
|
|
|
+ { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
|
|
|
+ { name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
|
|
|
+ ]
|
|
|
+ }
|
|
|
|
|
|
+ const color = [
|
|
|
+ [{ offset: 0, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(249, 180, 71, 0.8)' }, { offset: 1, color: 'rgba(249, 180, 71, 0.8)' }],
|
|
|
+
|
|
|
+ [{ offset: 0, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(97, 173, 237, 0.8)' }, { offset: 1, color: 'rgba(97, 173, 237, 0.8)' }],
|
|
|
+
|
|
|
+ ]
|
|
|
+ const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]
|
|
|
+
|
|
|
+ // tooltip
|
|
|
+ const tooltip = {
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: { fontSize: '100%' },
|
|
|
+ formatter: params => {
|
|
|
+ let rander = params.map(item => `<div>${item.seriesName}: ${item.value}</div>`).join('')
|
|
|
+ return rander
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const legend = {
|
|
|
+ data: ['计划收储', '完成收储'], //图例名称
|
|
|
+
|
|
|
+ textStyle: { fontSize: 12, color: '#fff' },
|
|
|
+ itemWidth: 24,
|
|
|
+ itemHeight: 15,
|
|
|
+ itemGap: 15,
|
|
|
+ top: '2%',
|
|
|
+ right: '2%',
|
|
|
+ selectedMode: false
|
|
|
+ }
|
|
|
+ const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
|
|
|
+ // xAxis
|
|
|
+ const xAxis = {
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: { fontSize: 12, color: '#fff' },
|
|
|
},
|
|
|
- tooltip: {
|
|
|
- show: false,
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- borderColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- textStyle: {
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- formatter: function (params, ticket, callback) {
|
|
|
- let text = ''
|
|
|
- params.map(item => {
|
|
|
- if (item.seriesName !== "") {
|
|
|
- text += `${item.seriesName}:${item.value}小时\n`
|
|
|
- }
|
|
|
- })
|
|
|
- return text
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
- width: 1
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- offset: 5,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- formatter: function (value) {
|
|
|
- // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
- if (value.length > 4) {
|
|
|
- return `${value.slice(0, 4)}...`;
|
|
|
- } else {
|
|
|
- return value;
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: xData
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: {
|
|
|
- "show": false,
|
|
|
- type: 'value',
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#0f3451'
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ if (value.length > 4) {
|
|
|
+ return `${value.slice(0, 4)}...`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
}
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#87baf8'
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#87baf8'
|
|
|
- },
|
|
|
- fontSize: 12
|
|
|
- }
|
|
|
},
|
|
|
- series: [
|
|
|
- // 立体效果通过柱状图的线性渐变色来达到 itemStyle
|
|
|
- // 下面的立体面
|
|
|
- {
|
|
|
- name: '计划收储',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolSize: [20, 20],
|
|
|
- symbolOffset: [-0, 10],
|
|
|
- z: 1,
|
|
|
- itemStyle: {
|
|
|
-
|
|
|
- color: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- type: 'linear',
|
|
|
- global: false,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
-
|
|
|
- color: 'rgba(24,152,226,1)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- // color: '#1898e2'
|
|
|
- color: 'rgba(24,152,226,1)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(18,133,199,1)'
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(18,133,199,1)'
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- data: [1, 1, 1, 1, 1, 1, 1]
|
|
|
- },
|
|
|
- // 堆叠的下方柱子
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- name: '时长',
|
|
|
- barWidth: 20, // 柱状图的宽度
|
|
|
-
|
|
|
- // z: 11,
|
|
|
- stack: 'zs',
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'top',
|
|
|
- color: '#10b3ff',
|
|
|
- fontFamily: 'dsDigital2',
|
|
|
- fontSize: 18,
|
|
|
- distance: 15 //距离头部的距离
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
-
|
|
|
- color: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- type: 'linear',
|
|
|
- global: false,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(24,152,226,0.7)'
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(24,152,2260.7)'
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(18,133,1990.7)'
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(18,133,1990.7)'
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- data: bottomValue
|
|
|
- },
|
|
|
- // 堆叠的上方柱子
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- stack: 'zs',
|
|
|
- barGap: '80%',
|
|
|
-
|
|
|
- name: '完成收储',
|
|
|
- // z: 10,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'top',
|
|
|
- color: '#ffa70f',
|
|
|
- fontFamily: 'dsDigital2',
|
|
|
- fontSize: 18,
|
|
|
- distance: 15
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- barWidth: 1, // 设置柱子粗细
|
|
|
- color: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- type: 'linear',
|
|
|
- global: false,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(246,201,92,1)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(246,201,92,1)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(190,157,72,1)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(190,157,72,1)'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- data: topValue
|
|
|
- },
|
|
|
+ data: mockData.xdata,
|
|
|
+ }
|
|
|
+
|
|
|
+ // yAxis
|
|
|
+ const yAxis = [{
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { show: false },
|
|
|
+ splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
|
|
|
+ axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
|
|
|
+ }, {
|
|
|
+ show: false,
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisLine: { show: false },
|
|
|
+ axisTick: { show: false },
|
|
|
+ }]
|
|
|
+ const diamondData = mockData.result.reduce((pre, cur, index) => {
|
|
|
+ pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
|
|
|
+ return pre
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ let series = mockData.result.reduce((p, c, i, array) => {
|
|
|
+ p.push({
|
|
|
+ z: i + 1,
|
|
|
+ stack: '总量',
|
|
|
+ type: 'bar',
|
|
|
+ name: c.name,
|
|
|
+ barGap: 18,
|
|
|
+ barWidth: 18,
|
|
|
+ data: c.data,
|
|
|
+ itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
|
|
|
+ }, {
|
|
|
+ z: i + 10,
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
+ symbolSize: [18, 12],
|
|
|
+ data: diamondData[i],
|
|
|
+ itemStyle: { color: color2[i] },
|
|
|
+ tooltip: { show: false },
|
|
|
+ })
|
|
|
+
|
|
|
+ // 是否最后一个了？
|
|
|
+ if (p.length === (array.length) * 2) {
|
|
|
+ p.push({
|
|
|
+ z: array.length * 2,
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbolPosition: "start",
|
|
|
+ data: mockData.result[0].data,
|
|
|
+ symbol: "diamond",
|
|
|
+ symbolOffset: ["0%", "50%"],
|
|
|
+ symbolSize: [18, 10],
|
|
|
+ itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
|
|
|
+ tooltip: { show: false },
|
|
|
+ })
|
|
|
+ return p
|
|
|
+ }
|
|
|
+
|
|
|
+ return p
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ const dataZoom = [{
|
|
|
+ show: false,
|
|
|
+ type: 'slider',
|
|
|
+ startValue: 0,
|
|
|
+ endValue: 7,
|
|
|
+ moveOnMouseWheel: true,
|
|
|
+ moveOnMouseMove: true,
|
|
|
+ zoomOnMouseWheel: false,
|
|
|
+ }]
|
|
|
+
|
|
|
+ let option = {
|
|
|
+
|
|
|
+ tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
- // 中间层的立体面,data是下方柱子的data
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolSize: [20, 20],
|
|
|
- symbolOffset: [-0, -10],
|
|
|
- symbolPosition: 'end',
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- barWidth: 1, // 设置柱子粗细
|
|
|
- color: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- type: 'linear',
|
|
|
- global: false,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(246,201,92,1)'
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(246,201,92,1)'
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(190,157,72,1)'
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(190,157,72,1)'
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- data: bottomValue
|
|
|
- },
|
|
|
- // 上方的立体面 data的数据应该是b1和b2的data相加的总和
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbol: 'diamond',
|
|
|
- symbolPosition: 'end',
|
|
|
- symbolSize: [20, 20],
|
|
|
- symbolOffset: [-0, -10],
|
|
|
- z: 20,
|
|
|
- // 是否展示总数
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false,
|
|
|
- position: 'top',
|
|
|
- fontSize: 24,
|
|
|
- color: '#fff',
|
|
|
- // offset: [0, 25],
|
|
|
- },
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- opacity: 1,
|
|
|
- color: '#f6c95c',
|
|
|
- barWidth: 1, // 设置柱子粗细
|
|
|
- },
|
|
|
- data: topImg
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
const that = this;
|
zpf