1、安装echarts
npm install echarts –save
2、引入echarts
// 引入 echarts
import echarts from ‘echarts’
// 全局注册组件
Vue.prototype.$echarts = echarts
3、使用
<template>
<div class=”test2″ style=”height:600px;” :style=”{width:barChartWidth?width:barChartWidth:’500px’}”>
<div id=”barChart” style=”width:100%;height:100%;float:left” />
</div>
</template>
创建图表，如果后台返回的数据不是标准的，需要根据实际情况处理图表数据
drawEcharts() {
const myChart = document.getElementById(‘barChart’)
//动态设置图表的宽高
myChart.style.width = this.barChartWidth
this.barChart = this.$echarts.init(myChart, { width: this.barChartWidth, height: ‘400px’ })
this.barChart.setOption({
tooltip: {
trigger: ‘axis’,
// formatter: ‘{a}’,
axisPointer: {
type: ‘shadow’
}
},
grid: {
x: 25,
y: 45,
x2: 5,
y2: 20,
borderWidth: 1
},
legend: {
data: [‘已完工’, ‘已交付施工且施工正常’, ‘已交付但施工暂未进场’, ‘未交付’, ‘交付后遇阻工无法正常施工’]
},
xAxis: [
{
type: ‘category’,
axisTick: { show: false },
data: this.chartxAxisLabel, //x轴label
axisLabel: {
show: true,
textStyle: {
color: ‘#ef4f4a’, // 更改坐标轴文字颜色
fontSize: 14, // 更改坐标轴文字大小
fontWeight: 500
}
}
}
],
yAxis: [
{
minInterval: 1,
type: ‘value’,
textStyle: {
color: ‘#f00’, // 更改坐标轴文字颜色
fontSize: 16 // 更改坐标轴文字大小
}
}
],
series: […this.barChartData]//图表数据
})
},
uniapp中，如果使用echarts,可以先定制所需图表资源，定制图表
使用时先导入
import $echarts from ‘@/components/echarts/echarts.min.js’;
//调用 $echarts.init(xxx)
h5端或小程序tooltip不能显示，无法解析html， 需要设置tooltip的renderMode属性为richText(测试h5端4.2.1版本有tooptip)
当图表外层的 dom 被设置为 ‘overflow: hidden’，或者移动端窄屏，导致 tooltip 超出外界被截断时，此时设置tooltip 的confine属性,是否将 tooltip 框限制在图表的区域内
————————————————
版权声明：本文为CSDN博主「鱼恋虾」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_50810577/article/details/117787416