|
|
@@ -45,207 +45,266 @@ export default {
|
|
|
methods: {
|
|
|
init_bjxm_echart() {
|
|
|
var myChart = echarts.init(document.getElementById("bjxm_echart"));
|
|
|
+ // 柱状图的宽度，y是x的一半
|
|
|
+ const offsetX = 10
|
|
|
+ const offsetY = 5
|
|
|
|
|
|
- var dataList = [
|
|
|
- {
|
|
|
- value: 31,
|
|
|
- name: "城市报建",
|
|
|
+ // 绘制左侧面
|
|
|
+ const CubeLeft = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
},
|
|
|
- {
|
|
|
- value: 43,
|
|
|
- name: "私宅报建",
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ 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
|
|
|
},
|
|
|
- ];
|
|
|
- var color2 = [
|
|
|
- {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#FC8053",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#F2CAA4",
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false,
|
|
|
- },
|
|
|
+ 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,
|
|
|
},
|
|
|
- {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#5583e7",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#36dddb",
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false,
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 注册三个面图形
|
|
|
+ echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
+ echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
+ echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
+ // 数据
|
|
|
+ const VALUE = [210.9, 260.8, 204.2, 504.9, 740.5]
|
|
|
+ let option = {
|
|
|
+ //你的代码
|
|
|
+ backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
},
|
|
|
+ formatter: function (params) {
|
|
|
+ const item = params[1]
|
|
|
+ return item.name + "\n" + item.value;
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#f888b1",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#fbe6ee",
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false,
|
|
|
- },
|
|
|
+ grid: {
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 20,
|
|
|
+ top: 30,
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- ];
|
|
|
- var dataAll = 0;
|
|
|
- dataList.forEach((item, index) => {
|
|
|
- item.itemStyle = color2[index];
|
|
|
- dataAll += item.value;
|
|
|
- });
|
|
|
-
|
|
|
- let option = {
|
|
|
- backgroundColor: "rgba(0,0,0,0)",
|
|
|
- title: {
|
|
|
- text: "报建数量",
|
|
|
- x: "20%",
|
|
|
- textStyle: {
|
|
|
- // rich: {
|
|
|
- fontSize: 14,
|
|
|
- color: "#fff",
|
|
|
- fontWeight: "bold",
|
|
|
- // align: "35%"
|
|
|
-
|
|
|
- // a: {
|
|
|
- // color: "#fff",
|
|
|
- // fontSize: 42,
|
|
|
- // align: "35%",
|
|
|
- // },
|
|
|
- // b: {
|
|
|
- // fontSize: 20,
|
|
|
- // color: "#fff",
|
|
|
- // fontWeight: "bold",
|
|
|
- // align: "35%",
|
|
|
- // }
|
|
|
- // },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['崖州区', '天崖区', '吉阳区', '海棠区', '育才区'],
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'white'
|
|
|
+ }
|
|
|
},
|
|
|
- x: "20%",
|
|
|
- y: "45%",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: "vertical",
|
|
|
- right: "10%",
|
|
|
- top: "center",
|
|
|
- data: ["城市报建", "私宅报建"],
|
|
|
- icon: "rect", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
|
|
|
- itemWidth: 10, // 设置宽度
|
|
|
- itemHeight: 10, // 设置高度
|
|
|
-
|
|
|
- itemGap: 10, // 设置间距
|
|
|
- textStyle: {
|
|
|
- //图例文字的样式
|
|
|
- color: "#fff",
|
|
|
- fontSize: 16,
|
|
|
+ // offset: 25,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ length: 9,
|
|
|
+ alignWithLabel: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#7DFFFD'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 12,
|
|
|
},
|
|
|
},
|
|
|
- graphic: [
|
|
|
+ yAxis: [
|
|
|
{
|
|
|
- type: "group",
|
|
|
- top: "middle",
|
|
|
- left: "center",
|
|
|
- id: "data",
|
|
|
- children: [
|
|
|
- // {
|
|
|
- // type: "text",
|
|
|
- // id: "current",
|
|
|
- // top: 40,
|
|
|
- // style: {
|
|
|
- // text: dataAll,
|
|
|
- // font: 'bolder 36px "Microsoft YaHei", sans-serif',
|
|
|
- // fill: "#fff",
|
|
|
- // textAlign: "center"
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // type: "text",
|
|
|
- // id: "all",
|
|
|
- // top: 80,
|
|
|
- // left:'10%',
|
|
|
- // style: {
|
|
|
- // text: "报建数量",
|
|
|
- // font: 'bolder 14px "Microsoft YaHei", sans-serif',
|
|
|
- // fill: "#fff",
|
|
|
- // // textAlign: "center"
|
|
|
- // }
|
|
|
- // }
|
|
|
- ],
|
|
|
+ min: 0,
|
|
|
+ max: 1200,
|
|
|
+ interval: 200,
|
|
|
+ type: 'value',
|
|
|
+ name: '用地面积(km2)',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ color: "rgba(255,255,255,0.1)"
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 12,
|
|
|
+
|
|
|
+ },
|
|
|
+ boundaryGap: ['20%', '20%']
|
|
|
},
|
|
|
- ],
|
|
|
- series: [
|
|
|
{
|
|
|
- name: "轮次",
|
|
|
- type: "pie",
|
|
|
- radius: ["45%", "80%"],
|
|
|
- center: ["30%", "50%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false,
|
|
|
- position: "inner", // 数值显示在内部
|
|
|
- formatter: (params) => {
|
|
|
- console.log(params);
|
|
|
- return `${params.name}` + ":" + +params.value + "个";
|
|
|
- },
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- //图例文字的样式
|
|
|
- color: "#fff",
|
|
|
- fontSize: 16,
|
|
|
+ min: 0,
|
|
|
+ max: 1200,
|
|
|
+ interval: 200,
|
|
|
+ name: '项目数(个)',
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'white'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ color: "rgba(255,255,255,0.1)"
|
|
|
},
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: "16",
|
|
|
- fontWeight: "bold",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 12,
|
|
|
+
|
|
|
+ },
|
|
|
+ boundaryGap: ['20%', '20%']
|
|
|
+ },],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'custom',
|
|
|
+ renderItem: (params, api) => {
|
|
|
+ const location = api.coord([api.value(0), api.value(1)])
|
|
|
+ var color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(33,101,140,0.5)'
|
|
|
+
|
|
|
},
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(33,101,140,0.5)'
|
|
|
+
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ console.log(color);
|
|
|
+ return {
|
|
|
+ type: 'group',
|
|
|
+ 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: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(33,101,140,0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(33,101,140,0.5)'
|
|
|
+
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#195684'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: '#195684'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 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: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(33,101,140,0.5)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(33,101,140,0.5)'
|
|
|
+
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- length: 48,
|
|
|
+
|
|
|
+ data: VALUE
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FFCC64' // 折线的颜色
|
|
|
+ }
|
|
|
},
|
|
|
- data: dataList,
|
|
|
+ data: VALUE,
|
|
|
},
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- left: "20%",
|
|
|
- // right: "40%",
|
|
|
- // bottom: "10%",
|
|
|
- top: "16%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
+ ]
|
|
|
};
|
|
|
-
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
},
|
|
|
@@ -373,7 +432,7 @@ export default {
|
|
|
#bjxm_echart {
|
|
|
position: relative;
|
|
|
top: 0;
|
|
|
- width: 20.5rem;
|
|
|
- height: 10rem;
|
|
|
+ width: 23.5rem;
|
|
|
+ height: 11rem;
|
|
|
}
|
|
|
</style>
|
zpf