|
|
@@ -51,15 +51,68 @@ export default {
|
|
|
const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]
|
|
|
|
|
|
// tooltip
|
|
|
+ // const tooltip = {
|
|
|
+
|
|
|
+ // trigger: "axis",
|
|
|
+ // axisPointer: {
|
|
|
+ // // 坐标轴指示器，坐标轴触发有效
|
|
|
+ // type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ // },
|
|
|
+ // padding: [8, 15],
|
|
|
+ // backgroundColor: "rgba(12, 51, 115,0.8)",
|
|
|
+ // borderColor: "rgba(3, 11, 44, 0.5)",
|
|
|
+ // textStyle: {
|
|
|
+ // color: "rgba(255, 255, 255, 1)"
|
|
|
+ // },
|
|
|
+ // formatter: params => {
|
|
|
+ // let rander = params.map(item => `<div>${item.seriesName}: ${item.value}</div>`).join('')
|
|
|
+ // return rander
|
|
|
+ // }
|
|
|
+ // }
|
|
|
const tooltip = {
|
|
|
+ backgroundColor: 'RGBA(20, 106, 178, 0.4)',
|
|
|
trigger: "axis",
|
|
|
textStyle: { fontSize: '100%' },
|
|
|
formatter: params => {
|
|
|
- let rander = params.map(item => `<div>${item.seriesName}: ${item.value}</div>`).join('')
|
|
|
+ let rander = params.map(item => `
|
|
|
+ <div style='
|
|
|
+ border:none;
|
|
|
+ border-radius:3px;
|
|
|
+ color:#FFF;
|
|
|
+ font-size:12px
|
|
|
+ '>
|
|
|
+ ${item.seriesName}: ${item.value}
|
|
|
+ </div>`).join('')
|
|
|
return rander
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // const tooltip = {
|
|
|
+ // trigger: 'item',
|
|
|
+ // backgroundColor: 'none',
|
|
|
+ // padding: 5,
|
|
|
+ // formatter: params => {
|
|
|
+ // let rander = params.map(item => `<div>${item.seriesName}: ${item.value}公顷</div>`).join('')
|
|
|
+ // return rander
|
|
|
+ // },
|
|
|
+
|
|
|
+
|
|
|
+ // formatter: function (param) {
|
|
|
+ // var resultTooltip = "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
|
|
|
+ // "<div style='text-align:center;'>" + param.name + "</div>" +
|
|
|
+ // "<div style='padding-top:5px;'>";
|
|
|
+
|
|
|
+ // resultTooltip +=
|
|
|
+ // "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + param.color.colorStops[0].color + ";'></span>" +
|
|
|
+ // "<span style=''> " + param.seriesName + ": </span>" +
|
|
|
+ // "<span style='color:" + param.color.colorStops[0].color + "'>" + param.value + "</span></span><span>" + "</span></br>"
|
|
|
+
|
|
|
+
|
|
|
+ // resultTooltip += "</div>";
|
|
|
+
|
|
|
+ // return resultTooltip
|
|
|
+ // }
|
|
|
+ // }
|
|
|
const legend = {
|
|
|
data: _this.$props.legendData, //图例名称
|
|
|
|
|
|
@@ -187,7 +240,6 @@ export default {
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
#BarGraph3D {
|
|
|
- z-index: -1;
|
|
|
left: -2rem;
|
|
|
top: 0.1rem;
|
|
|
width: 26rem;
|
zpf