左右双柱状图
2023-11-09 本文已影响0人
衬fzy
微信截图_20231110123124.jpg
引入使用
import Number from './components/Left1'
<Left1 :id="`left1_1`" :datas="left1Obj"></Left1>
组件代码（感叹号最需要部分）
<template>
<div :id="id" class="echarts1"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
// startVal 初始值 endVal 最终值 title 标签值
props: {
datas: {
type: [Array, Object],
default: null
},
id: {
type: String,
default: null
}
},
data() {
return {
Time1: null,
datasCopy: ''
}
},
computed: {},
watch: {
// 这是监听json值变化
datas: {
// json为监听参数名
handler: function (val, oldVal) {
// 不能用箭头函数
this.echartsFun(val)
}
}
},
beforeDestroy() {
clearInterval(this.Time1)
},
methods: {
echartsFun(val) {
val = {
data1: [11, 50, 7, 18, 35],
data2: [17, 15, 27, 18, 35]
}
this.datasCopy = val
// console.log(JSON.parse(JSON.stringify(this.datasCopy)))
echarts.init(document.getElementById(this.id)).dispose() // 一定要摧毁
const myChart = echarts.init(document.getElementById(this.id))
myChart.clear()
var option = {
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
fontSize: 14
}
},
"grid": [{
"left": "11%",
"right": "62%",
"top": 30,
"bottom": "10"
}, {
"left": "62%",
"right": "11%",
"top": 30,
"bottom": "10"
}, {
"left": 0,
"right": 0,
"top": 0,
"bottom": 0
}],
"xAxis": [
{
"type": "value",
"gridIndex": 0,
"inverse": true,
// padding:[20,20,20,20],
"axisLine": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "red"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "dotted",
"color": "#ccc",
"width": 1
}
},
"axisTick": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "#fff"
}
},
"axisLabel": {
"show": false,
"fontFamily": "Microsoft YaHei",
"fontSize": 20,
"color": "fff",
"interval": "auto",
"rotate": "0"
},
"data": []
}, {
"type": "value",
"gridIndex": 1,
"inverse": false,
"axisLine": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "red"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "dotted",
"color": "red",
"width": 1
}
},
"axisTick": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "red"
}
},
"axisLabel": {
"show": false,
"fontFamily": "Microsoft YaHei",
"fontSize": 12,
"color": "#fff",
"interval": "auto",
"rotate": "0"
},
"data": []
}, {
"type": "value",
"gridIndex": 2,
"inverse": false,
"axisLine": { // 只有这个
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "red"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "dotted",
"color": "#ccc",
"width": 1
}
},
"axisTick": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "red"
}
},
"axisLabel": {
"show": false,
"fontFamily": "Microsoft YaHei",
"fontSize": 12,
"color": "red",
"interval": "auto",
"rotate": "0"
},
"data": []
}],
"yAxis": [
{
"type": "category",
"gridIndex": 0,
"axisLine": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "red"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "dotted",
"color": "#ccc",
"width": 1
}
},
"axisTick": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "#888888"
}
},
"axisLabel": {
"show": true,
"fontFamily": "Microsoft YaHei",
"fontSize": 12,
"color": "#ffffff",
"align": "center",
"interval": "auto",
"padding": [10, 0, 0, 310]// 左侧310，刚好居中
},
"data": ['境外平台', 'Telegram', 'Twitter', '境内数据'],
"position": "left"
}, {
"type": "category",
"gridIndex": 1,
"axisLine": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "#888888"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "dotted",
"color": "#ccc",
"width": 1
}
},
"axisTick": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "#888888"
}
},
"axisLabel": {
"show": false,
"fontFamily": "Microsoft YaHei",
"fontSize": 16,
"color": "#fff",
"interval": "auto"
},
"data": []
}, {
"type": "category",
"gridIndex": 2,
"axisLine": {
"show": false,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "#888888"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "dotted",
"color": "#ccc",
"width": 1
}
},
"axisTick": {
"show": true,
"lineStyle": {
"width": 1,
"type": "solid",
"color": "#888888"
}
},
"axisLabel": {
"show": true,
"fontFamily": "Microsoft YaHei",
"fontSize": 16,
"color": "#777575",
"interval": "auto"
}
}],
"series": [{
"colId": "col402utokg",
"name": '达赖',
"type": "bar",
// type: 'pictorialBar',
// symbol: 'images', //可以使用自定义图片作为柱状图形
// symbol: 'image://' + BASE_PATH + '/pages/transportation/pages/supply/img/qianlvzz.png',
"stack": null,
"data": this.datasCopy.data1,
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#BCDCF6'
}, {
offset: 1,
color: '#172F5B'
}]),
barBorderRadius: 12
}
},
"xAxisIndex": 0,
"yAxisIndex": 0,
"label": {
"position": "left",
"fontFamily": "Microsoft YaHei",
"show": true,
"fontSize": 12,
"color": "#fff",
formatter: (series) => {
return series.value + '条'
}
}
}, {
"colId": "col3kkgr6h9",
"name": '班禅',
"type": "bar",
// type: 'pictorialBar',
// symbol: 'images', //可以使用自定义图片作为柱状图形
// symbol: 'image://' + BASE_PATH + '/pages/transportation/pages/supply/img/qianlanzz.png',
"stack": null,
"data": this.datasCopy.data2,
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#5B3117'
}, {
offset: 1,
color: '#F6D1BC'
}]),
barBorderRadius: 12
}
},
"xAxisIndex": 1,
"yAxisIndex": 1,
"label": {
"position": "right",
"fontFamily": "Microsoft YaHei",
"show": true,
"fontSize": 12,
"color": "#fff",
formatter: (series) => {
return series.value + '条'
}
}
}]
};
myChart.setOption(option, true) // true无数据时更新试图
}
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
width: 100%;
height: 100%;
}
</style>
