|
|
@@ -56,184 +56,285 @@ export default {
|
|
|
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
|
|
|
+ let hysyEchart// 柱状图的宽度，y是x的一半
|
|
|
+ const offsetX = 10
|
|
|
+ const offsetY = 5
|
|
|
+ let colorList = ["RGBA(30, 111, 181, 1)", "RGBA(30, 111, 181, 1)", "RGBA(29, 128, 64, 1)", "RGBA(133, 48, 52, 1)", "RGBA(121, 62, 147, 1)"]
|
|
|
+
|
|
|
+ // 绘制左侧面
|
|
|
+ const CubeLeft = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ // 会canvas的应该都能看得懂，shape是从custom传入的
|
|
|
+ const xAxisPoint = shape.xAxisPoint
|
|
|
+ const c0 = [shape.x, shape.y]
|
|
|
+ const c1 = [shape.x - offsetX, shape.y - offsetY]
|
|
|
+ const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
|
|
|
+ const c3 = [xAxisPoint[0], xAxisPoint[1]]
|
|
|
+ ctx
|
|
|
+ .moveTo(c0[0], c0[1])
|
|
|
+ .lineTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .closePath()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 绘制右侧面
|
|
|
+ const CubeRight = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const xAxisPoint = shape.xAxisPoint
|
|
|
+ const c1 = [shape.x, shape.y]
|
|
|
+ const c2 = [xAxisPoint[0], xAxisPoint[1]]
|
|
|
+ const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
|
|
|
+ const c4 = [shape.x + offsetX, shape.y - offsetY]
|
|
|
+ ctx
|
|
|
+ .moveTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .lineTo(c4[0], c4[1])
|
|
|
+ .closePath()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 绘制顶面
|
|
|
+ const CubeTop = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const c1 = [shape.x, shape.y]
|
|
|
+ const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
|
|
|
+ const c3 = [shape.x, shape.y - offsetX]
|
|
|
+ const c4 = [shape.x - offsetX, shape.y - offsetY]
|
|
|
+ ctx
|
|
|
+ .moveTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .lineTo(c4[0], c4[1])
|
|
|
+ .closePath()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // // 绘制底面
|
|
|
+ const CubeBottom = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 10,
|
|
|
+ y: 10
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const xAxisPoint = shape.xAxisPoint
|
|
|
+ const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
|
|
|
+ const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右点
|
|
|
+ const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
|
|
|
+ const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX]
|
|
|
+ ctx
|
|
|
+ .moveTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .lineTo(c4[0], c4[1])
|
|
|
+ .closePath()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 注册图形
|
|
|
+ echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
+ echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
+ echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
+ echarts.graphic.registerShape('CubeBottom', CubeBottom)
|
|
|
+ const dataX = ["渔业用海", "工业用海", "造地工程", "旅游娱乐", "交通运输"]
|
|
|
+ const barData = [45, 33, 11, 20, 3]
|
|
|
let option = {
|
|
|
+ //你的代码
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
grid: {
|
|
|
- top: "65px",
|
|
|
- bottom: "50px",
|
|
|
- left: "45px",
|
|
|
- right: "20px",
|
|
|
+ // bottom: "200%",
|
|
|
+ // top: "%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- title: { //配置标题组件
|
|
|
- text: "", //设置主标题
|
|
|
- textStyle: { //设置主标题文字样式
|
|
|
- color: 'green',
|
|
|
- },
|
|
|
- left: 20, //设置适当调整工具框的left位置
|
|
|
- top: 3 //设置适当调整工具框的top位置
|
|
|
- },
|
|
|
- tooltip: { //配置提示框组件
|
|
|
- trigger: 'axis', //当鼠标滑过轴线时触发显示于详情
|
|
|
- axisPointer: {
|
|
|
- type: 'cross',//line(直线) || shadow(阴影) || cross(十字准星) || none
|
|
|
- label: {
|
|
|
- show: true // 鼠标移入X轴文字效果 true || false
|
|
|
- }
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ right: 30,
|
|
|
+ top: 10,
|
|
|
+ itemGap: 30,
|
|
|
+ itemWidth: 20,
|
|
|
+ itemHeight: 10,
|
|
|
+ data: ['时长', '百分比'],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#ffffff'
|
|
|
}
|
|
|
},
|
|
|
- legend: { //配置图例组件
|
|
|
- data: ['渔业用海', '工业用海', '造地工程', '旅游娱乐', '交通运输'],
|
|
|
- left: 100, //设置适当调整工具框的left位置
|
|
|
- bottom: "200px", //设置适当调整工具框的top位置
|
|
|
+ color: ['#097dc0', '#26D6D7'],
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ trigger: 'axis',
|
|
|
textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#fff',
|
|
|
- padding: [5, 0, 0, 2],
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- verticalAlign: 'middle',
|
|
|
- },
|
|
|
- },
|
|
|
+ fontSize: 18 // 字体大小
|
|
|
},
|
|
|
- icon: 'rect',
|
|
|
- itemHeight: 14,
|
|
|
- itemWidth: 14,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
},
|
|
|
- xAxis: [ //配置X轴坐标系
|
|
|
- {
|
|
|
- //type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
|
|
|
- axisLabel: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12
|
|
|
- },
|
|
|
+ grid: {
|
|
|
+ top: '20%',
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: dataX,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#E7FCFF',
|
|
|
+ margin: 1
|
|
|
}
|
|
|
- ],
|
|
|
- yAxis: [ //配置Y轴坐标系
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
{
|
|
|
- name: "面积/公顷",
|
|
|
+ type: 'value',
|
|
|
+ name: '面积/公顷',
|
|
|
+ nameGap: 30,
|
|
|
nameTextStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12,
|
|
|
- padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#fff",
|
|
|
+ color: '#ffffff',
|
|
|
+ fontWeight: 100,
|
|
|
fontSize: 12
|
|
|
},
|
|
|
- type: "value",
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [ //配置数据系列。注意：将所有areaStyle去掉，则变成堆积折线图
|
|
|
- {
|
|
|
- name: '渔业用海',
|
|
|
- type: 'line', //设置指定显示为折线
|
|
|
- stack: '总量', //smooth:true,
|
|
|
- color: 'rgb(0,0,0)',
|
|
|
- symbol: "none",
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(65, 139, 212, 1)" // 线条颜色
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
}
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaStyle: {
|
|
|
- //type: 'default',
|
|
|
- color: 'rgba(65, 139, 212, 1)'
|
|
|
- }
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
}
|
|
|
},
|
|
|
- data: [434, 345, 456, 222, 333, 444, 432]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '工业用海',
|
|
|
- type: 'line', //设置指定显示为折线
|
|
|
- stack: '总量', //设置堆积
|
|
|
- color: 'blue',
|
|
|
- symbol: "none",
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(255, 176, 57, 1)" // 线条颜色
|
|
|
- }
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaStyle: {
|
|
|
- //type: 'default',
|
|
|
- color: 'rgba(255, 176, 57, 1)'
|
|
|
- }
|
|
|
- }
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#E7FCFF'
|
|
|
},
|
|
|
- data: [420, 282, 391, 344, 390, 530, 410]
|
|
|
+ min: 0,
|
|
|
+ // max: Math.ceil(Math.max.apply(null, dataX) / 5) * 5,
|
|
|
+ // interval: Math.ceil(Math.max.apply(null, dataX) / 5)
|
|
|
},
|
|
|
{
|
|
|
- name: '造地工程',
|
|
|
- type: 'line', //设置指定显示为折线
|
|
|
- stack: '总量', //设置堆积
|
|
|
- color: 'red',
|
|
|
- symbol: "none",
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(92, 185, 129, 1)" // 线条颜色
|
|
|
- }
|
|
|
+ type: 'value',
|
|
|
+ name: '%',
|
|
|
+ nameGap: 30,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 16
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaStyle: {
|
|
|
- //type: 'default',
|
|
|
- color: 'rgba(92, 185, 129, 1)'
|
|
|
- }
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
}
|
|
|
},
|
|
|
- data: [350, 332, 331, 334, 390, 320, 340]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '旅游娱乐',
|
|
|
- type: 'line', //设置指定显示为折线
|
|
|
- stack: '总量', //设置堆积
|
|
|
- color: 'green',
|
|
|
-
|
|
|
- symbol: "none",
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(255, 98, 96, 1)" // 线条颜色
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
}
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaStyle: {
|
|
|
- //type: 'default',
|
|
|
- color: 'rgba(255, 98, 96, 1)'
|
|
|
- }
|
|
|
- }
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
},
|
|
|
- data: [420, 222, 333, 442, 230, 430, 430]
|
|
|
- },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#E7FCFF'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
{
|
|
|
- name: '交通运输',
|
|
|
- type: 'line', //设置指定显示为折线
|
|
|
- stack: '总量', //设置堆积
|
|
|
- color: '#FA8072',
|
|
|
-
|
|
|
- symbol: "none",
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(137, 81, 157, 1))" // 线条颜色
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {//设置item的样式
|
|
|
- normal: {//常规状态
|
|
|
- areaStyle: { //区域样式，仅在折线图中有效
|
|
|
- //type: 'default',
|
|
|
- color: 'rgba(137, 81, 157, 1)'
|
|
|
- }
|
|
|
+ name: '时长',
|
|
|
+ type: 'custom',
|
|
|
+ renderItem: (params, api) => {
|
|
|
+ const location = api.coord([api.value(0), api.value(1)])
|
|
|
+ return {
|
|
|
+ type: 'group',
|
|
|
+ x: 0,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'CubeLeft',
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0],
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: colorList[params.dataIndex % colorList.length]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'CubeRight',
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0],
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: colorList[params.dataIndex % colorList.length],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'CubeTop',
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0],
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: colorList[params.dataIndex % colorList.length],
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- data: [330, 442, 432, 555, 456, 666, 877, 634, 534, 55, 111]
|
|
|
- }
|
|
|
+ data: barData
|
|
|
+ },
|
|
|
]
|
|
|
- };
|
|
|
+ }
|
|
|
+
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
},
|
|
|
@@ -368,10 +469,9 @@ export default {
|
|
|
|
|
|
#hysyEchart {
|
|
|
left: 1rem;
|
|
|
- top: 1rem;
|
|
|
- width: 32rem;
|
|
|
- height: 14rem;
|
|
|
- display: none;
|
|
|
+ top: 0.5rem;
|
|
|
+ width: 26rem;
|
|
|
+ height: 11.5rem;
|
|
|
}
|
|
|
|
|
|
.box {
|
zpf