|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <div id="BarGraph3D" ref="BarGraph3D"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ legendData: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ xdata: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ result: {
|
|
|
+ type: Array,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: { // 监听到数据然后赋值
|
|
|
+ legendData(oldval, newval) {
|
|
|
+ this.ChangeData()
|
|
|
+ },
|
|
|
+ xdata(oldval, newval) {
|
|
|
+ this.ChangeData()
|
|
|
+ }, result(oldval, newval) {
|
|
|
+ this.ChangeData()
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chart: null,
|
|
|
+ option: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ init_3DBarGraph_echart(legendData, xdata, result) {
|
|
|
+ const _this = this;
|
|
|
+ _this.chart = echarts.init(this.$refs.BarGraph3D);
|
|
|
+ // Mock数据
|
|
|
+ const mockData = {
|
|
|
+ // xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
|
|
|
+ xdata: xdata,
|
|
|
+
|
|
|
+ result: result
|
|
|
+ }
|
|
|
+
|
|
|
+ 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)',]
|
|
|
+
|
|
|
+ const tooltip = {
|
|
|
+ backgroundColor: 'RGBA(20, 106, 178, 0.4)',
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: { fontSize: '100%' },
|
|
|
+ formatter: params => {
|
|
|
+ let rander = params.map(item =>
|
|
|
+ `
|
|
|
+ <div style='
|
|
|
+ border:none;
|
|
|
+ border-radius:3px;
|
|
|
+ color:#FFF;
|
|
|
+ font-size:12px
|
|
|
+ '>
|
|
|
+ ${item.seriesName ? item.seriesName : ''} ${item.value > 0 ? item.value : ''}
|
|
|
+ </div>`).join('')
|
|
|
+ return rander
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const legend = {
|
|
|
+ data: legendData, //图例名称
|
|
|
+
|
|
|
+ textStyle: { fontSize: 12, color: '#fff' },
|
|
|
+ itemWidth: 24,
|
|
|
+ itemHeight: 15,
|
|
|
+ itemGap: 15,
|
|
|
+ top: '5%',
|
|
|
+ right: '2%',
|
|
|
+ selectedMode: false
|
|
|
+ }
|
|
|
+ const grid = { top: '10%', left: '5%', right: '10%', bottom: '15%' }
|
|
|
+ // xAxis
|
|
|
+ const xAxis = {
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { lineStyle: { color: '#BCD3E5' } },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: { fontSize: 12, color: '#BCD3E5' },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ if (value.length > 4) {
|
|
|
+ return `${value.slice(0, 4)}...`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ }]
|
|
|
+
|
|
|
+ _this.option = {
|
|
|
+
|
|
|
+ tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
|
|
|
+ }
|
|
|
+
|
|
|
+ this.chart.setOption(this.option);
|
|
|
+
|
|
|
+ },
|
|
|
+ setOptions(legendData, xdata, result) {
|
|
|
+ this.init_3DBarGraph_echart(legendData, xdata, result);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ mounted() {
|
|
|
+ const _this = this;
|
|
|
+ // this.init_3DBarGraph_echart(_this.$props.legendFlag, _this.$props.xdata, _this.$props.result);
|
|
|
+ }, //生命周期 - 挂在完成
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroy() { },//生命周期 - 销毁完成
|
|
|
+ activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+#BarGraph3D {
|
|
|
+ left: 0rem;
|
|
|
+ top: 0.1rem;
|
|
|
+ width: 27rem;
|
|
|
+ height: 11rem;
|
|
|
+}
|
|
|
+</style>
|
zpf