下面echarts 柱状图
首先效果图
下面开始堆代码
1、先看一下vue中html
<template>
<view class="content">
<!-- 标题描述 - 标题总数显示 -->
<view class="describe">
<view class="describeL">
<view class="circle"></view>
<text>投入金额</text>
<text>220亿</text>
</view>
<view class="describeR">
<view class="circle"></view>
<text>资产规模</text>
<text>36545亿</text>
</view>
</view>
<!-- 图表-柱状图 -->
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="histogram" class="echarts"></view>
</view>
</template>
2.javascript里面配置
<script>
export default {
props: {
dataListX: {
type: Array,
default: () => [],
},
dataList: {
type: Array,
default: () => [],
},
operationData:{
type:Object,
default:{}
}
},
data() {
return {
echartKey:1,
}
},
computed:{
option(){
return {
grid: {
x:30,
y:10,
x2:20,
y2:40,
left:40,
right:12
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(211, 177, 150, 0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(179, 119, 72, 0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
} // 阴影颜色
}
}
},
xAxis: {
type: 'category',
data: this.dataListX,
axisLabel: { //字体
interval: 0,
textStyle: {
color: '#B4B6BC'
}
},
axisLine: { //线条
lineStyle: {
color: '#E4E8ED',
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
scale : true,
max : 300,
min : 0,
splitNumber : 3,
boundaryGap : [ 0.2, 0.2 ],
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: 'rgba(172, 191, 221, .11)',
width: 1,
type: 'solid'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#E4E8ED'
}
},
axisLine: {
lineStyle: {
color: '#FFFFFF',
}
},
},
series: [{
name: '投入金额',
type: 'bar',
barWidth:8,
data: [2, 2, 4, 7, 16, 17, 20, 26, 26, 38, 29, 33],
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
barBorderRadius: [2, 2, 0, 0],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
// rgba(210, 153, 86, 0.4)
color: '#D29956' // 0% 处的颜色
}, {
offset: 1,
// rgba(154, 79, 29, 0.1)
color: '#9A4F1D' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
},
},
},
{
name: '资产规模',
type: 'bar',
barWidth:8,
data: [3114, 3057, 3102, 3082, 3159, 3170, 3105, 3009, 3160, 3146, 2757, 2684],
itemStyle: {
normal: {
//设置圆角
barBorderRadius: [2, 2, 0, 0],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
// rgba(210, 153, 86, 1)
color: 'rgba(210, 153, 86, .4)' // 0% 处的颜色
}, {
offset: 1,
// rgba(154, 79, 29, 1)
color: 'rgba(154, 79, 29, .4)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
}
]
}
}
},
methods: {
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
name: 'histogram',
mounted() {
var timer = setTimeout(() => {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
clearTimeout(timer)
}, 1000);
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('histogram'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
if (this.dataList.length > 0) {
myChart.setOption(newValue)
}
},
}
}
</script>
css_241">3css代码
css"><style lang="less" scoped>
.title{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2E313C;
padding: 0rpx 30rpx;
margin-top: 42rpx;
}
.wrapper{padding: 0rpx 30rpx 80rpx;margin-top: 20rpx;
.content{
height: 450rpx;
background: #FFFFFF;
box-shadow: 0px 6px 18px 0px rgba(70, 66, 61, 0.1);
border-radius: 12rpx;
border: 1px solid rgba(220, 218, 213, .2);
}
}
</style>
