<template>
<div ref="hills" style="width: 100%; height: 100%"></div>
</template>
<script >
import echarts from 'echarts'
import "echarts/lib/chart/bar"
import "echarts/lib/component/tooltip"
import "echarts/lib/component/grid"
import {convertUnit,convertUnitNewline,getChartLabel} from "../../lib/tools"
export default {//小山，柱状图,圆点
name: "hillsChart",
data () {
return {
year: [],
value: []
}
},
props: {
chartData: Array,//小山柱状图的数据
chartCircleData: Array,//圆环的数据
chartName: Array,//x轴单位
hillsColor: Array,//小山颜色
//labelBgColor: ['rgba(97,147,227,0.5)','rgba(248,207,112,0.5)'],
labelBgColor: ['red','blue'],//lable背景颜色
hillsUnit: String,
isIncome: Boolean,
isMobile:Boolean
},
computed: {
option() {
let xPositon = ['bottom','top'];
let labelPosition = ['top','bottom'];
let index = 0;
let label = getChartLabel();
if ([0] < 0 && [1] < 0) {
index = 1
}
//=====================lable颜色自定义==========================
let datas=[];
for(let i in ){
({
value:[i],
label: {
show: true,//显示小山顶部的数字
position: labelPosition[index],//数字显示位置
padding: 3,
color: '#fff',
offset: [0, -5],
backgroundColor: [i],
borderRadius:[5,5,5,5],
// fontWeight: 'bold',
fontSize: 14,
formatter: (params)=>{
// ();
if () {
return (params.value,'',4) + '\n' + ;
}
return (params.value) + ;
}
}
});
}
let axis = [];
for(let i in ){
({
value:[i],
textStyle:{
color: '#474747'
}
});
}
//=====================================================
return {
grid: {
left: '5%',
// right: '0%',
top: '20%',
bottom: '20%',
containLabel: false
},
xAxis: {
type: 'category',
data: axis,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4A4A4A',
fontSize:
}
}
},
yAxis: {
splitLine: {show: false},
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {show: false}
},
series: [
{//显示小山
name: 'hill',
type: 'pictorialBar',
barCategoryGap: '-10%',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
data: datas,
symbolSize: ['100%','100%'],
z: -10,
},
{//显示圆点
data: ,
type: 'line',
symbol:'circle',
symbolSize:12,
itemStyle:{
color: '#F2F2F2',
borderColor:"#A89463",
borderWidth:2
},lineStyle: {//隐藏圆点之间的直线
normal: {
opacity: 0
}
},label: {
show: false,//显示圆点顶部的数字
position: labelPosition[index],//数字显示位置
padding: 3,
color: '#fff',
offset: [0, -5],
backgroundColor: '#A89463',
borderRadius:[5,5,5,5],
// fontWeight: 'bold',
fontSize: 14,
formatter: (params)=>{
// ();
if () {
return (params.value,'',4) + '\n' + ;
}
return (params.value) + ;
}
}
}
]
}
}
},
methods:{
//根据参数来设置柱状颜色
setStyle: function(){
var that = this;
[0].itemStyle={
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
let colorList = ;
return colorList[];
},
// opacity:0.8,
barBorderRadius: 5,
}
}
},
convertUnit: convertUnit,
convertUnitNewline: convertUnitNewline,
initChart(){
// ();
// ();
let myChart=(this.$);
();
();
();
},
},
mounted(){
this.$nextTick(() => {
();
})
},
}
</script>
<style scoped>
</style>