<template>
<view class="content">
<!-- 引入的mpvue-echarts组件 -->
<uni-echarts class="ec-canvas" id="line-chart" ref="canvas" canvas-id="line-chart" :ec="echart"></uni-echarts><script>
import uniEcharts from ‘@/components/uni-echarts/uni-echarts‘;
export default {
data() {
return {
//echart图表参数
echart: {
option: {
color: [‘#597EF7‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘shadow‘
}
},
legend: {
},
grid: {
top:‘0‘,
left: ‘0%‘,
right: ‘2%‘,
bottom: ‘0%‘,
containLabel: true,
},
xAxis: {
type: ‘value‘,
boundaryGap: [0, 0.01],
show:false
},
yAxis: {
type: ‘category‘,
data: [‘巴西‘, ‘印尼‘, ‘美国‘, ‘印度‘, ‘中国‘, ‘日本‘,‘韩国‘,‘泰国‘],
splitLine:{show:false},
axisTick: {show: false},
axisLine: {show: false},
nameTextStyle: {
color: ‘#999‘,
fontSize: 13,
padding: [0, 0, 0, 0]
},
axisLabel: {
formatter: function (value, index) {
// 10 6 这些你自定义就行
var v = value.substring(0, 4) + ‘...‘
return value.length > 4 ? v : value
}
}
},
series: [
{
type: ‘bar‘,
barWidth : 8,//柱图宽度
data: [],
label: {
normal: {
show: true,
formatter: ‘{c}%‘,
position: "right",
textStyle: {
fontSize: ‘12rpx‘,
letterSpacing: ‘0.28rpx‘,
}
}
},
}
]
}
},
methods: {
// 重新渲染echart并且赋值
reloadEchart(data){
const option = this.echart.option;
option.series[0].data = data;
if(this.$refs[‘canvas‘]){
this.$refs[‘canvas‘].updateOption(option);
},
components: {
uniEcharts
}
}
</script>