<!--
* @Author: Coder_Yang
* @description:
* @LastEditTime: 2024-03-13 10:33:57
-->
<template>
<view>
<CaseEchart
:option="option"
style="height: 500px;width: 95vw;"
>
</CaseEchart>
</view>
</template>
<script>
import CaseEchart from'../CaseEchart.vue'
export default{
components:{
CaseEchart
},
props:{
data:{
default:()=>[],
typeof:Array
}
},
watch:{
'data'(oval,nlva){
this.getEcharts()
}
},
onLoad(query) {
},
created(){
this.getEcharts()
},
computed:{
},
data(){
return{
option:{},
CaseData:null
}
},
methods:{
getEcharts(){
this.CaseData = this.data.area2
var data = this.CaseData.chart2.datas.map(item =>{
return {
name : item.name,
value : item.value
}
})
var names = []
var values = [];
data.forEach((item, index) => {
names.push(item.name);
values.push(item.value);
})
this.option = {
id:'PaymentEcharts',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 0,
right: 40,
top: 20,
bottom: 20,
containLabel: true
},
xAxis: {
type: 'value',
splitNumber: 3,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#000",
fontSize: 14
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: names,
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: {
show: false
},
axisLabel: {
interval: 0,
// rotate: 30,
formatter:function(value) {
if (value.length > 5) {
return value.slice(0, 5) + '...';
} else {
return value;
}
},
textStyle: {
color: "#000",
fontSize: 12
}
},
splitLine: {
show: false
}
},
series: [{
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
borderRadius: 10,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: '#347CDD' }, // 0% 处的颜色
{ offset: 1, color: '#56fb93' } // 100% 处的颜色
],
global: false // 缺省为 false
}
},
label: {
show: true,
position: 'right',
color: '#000',
fontSize: 12
},
data: values
}]
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
再option里面直接写上formatter,是无法执行方法的,
需要在调用Echarts中再次调用
<template>
<view>
<view class="echarts" :prop="option" :change:prop="echarts.update" :id='option.id'></view>
</view>
</template>
<script>
export default {
name: 'Echarts',
props: {
option: {
type: Object,
required: true
},
axisLabelFormatter:{
type: Function,
},
detailFormatter:{
type: Function,
},
}
}
</script>
<script module="echarts" lang="renderjs">
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
export default {
data() {
return {
chart: null
}
},
mounted() {
if (typeof window.echarts === 'object') {
this.init()
} else {
// 动态引入类库
const script = document.createElement('script')
script.src = './static/Echarts/echarts.min.js'
script.onload = this.init.bind(this)
document.head.appendChild(script)
}
},
methods: {
/**
* 初始化echarts
*/
init() {
this.chart = echarts.init(this.$el)
this.update(this.option)
},
/**
* 监测数据更新
* @param {Object} option
*/
update(option) {
if (this.chart) {
// 因App端,回调函数无法从renderjs外传递,故在此自定义设置相关回调函数
if (option) {
// tooltip
if (option.tooltip) {
// 判断是否设置tooltip的位置
if (option.tooltip.positionStatus) {
option.tooltip.position = this.tooltipPosition()
}
// 判断是否格式化tooltip
if (option.tooltip.formatterStatus) {
option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
}
}
// 添加自定义的formatter
// #ifdef APP
if (option.series && option.series.length > 0) {
for (let series of option.series) {
// series.axisLabel.formatter = eval("(false || "+series.axisLabel.formatterFunction+")");
// series.detail.formatter = eval("(false || "+series.detail.detailFormatterFunction+")")
}
}
if(option.id == 'CaseTypeData'){
console.log(option.series);
}
if(option.id == 'PaymentEcharts'){
this.option.yAxis.axisLabel.formatter = function(value) {
console.log(value);
if (value.length > 5) {
return value.slice(0, 5) + '...';
} else {
return value;
}
}
}
// #endif
// 设置新的option
this.chart.setOption(option, option.notMerge)
}
}
},
if(option.id == 'PaymentEcharts'){
this.option.yAxis.axisLabel.formatter = function(value) {
console.log(value);
if (value.length > 5) {
return value.slice(0, 5) + '...';
} else {
return value;
}
}
}
重点看着一段,进行调用选用