安装
第一步，在uni-app市场找到百度图标导入 地址
第二步，安装 echarts 或者直接使用插件内的echarts.min文件
pnpm add echarts || npm install echarts注意：
必须使用hbuilderx 3.4.8-alpha及以上
echarts 5.3.0及以上
封装echarts组件
引入echarts文件
import * as echarts from 'echarts';创建echarts容器并设置容器宽高，给echarts元素设置ref属性
<view class="chart">
<l-echart ref="chart"></l-echart>
</view> .chart {
width: 100%;
height: 100%;
background-color: #fff;
}
::v-deep .lime-echart{
height: 100% !important;
width: 100% !important;
}设置好ehcarts的配置后，在methods创建一个方法来赋值
init(options) {
this.$refs.chart.init(echarts, chart => {
chart.setOption(options);
});
}完整示例
<template>
<view class="chart">
<l-echart ref="chart"></l-echart>
</view>
</template>
<script>
import moment from 'moment';
import * as echarts from 'echarts';
export default {
data() {
return {
options: {
color: ['#9dd3e8'],
title:{
x:"center",
y:"bottom",
textStyle:{ // 文字样式
color:'#aaaaaa',
fontWeight:700,
fontSize:18,
textShadowColor:'#000000', // 文字阴影颜色
textShadowBlur:1, // 文字阴影宽度
},
subtext:'', //副标题
},
tooltip: {
trigger:'axis', // 触发类型 item/axis
confine: true,
},
legend: {
type:'plain',
orient:'horizontal',
},
grid: {
left:"10%",
right:'5%',
top:'15%',
bottom:'8%',
},
xAxis: [
{
type:'time',
// splitNumber:3,
axisLine:{
onZero:false,
lineStyle :{
color: '#000',
}
},
splitLine: {
show: true,
},
axisLabel:{
textStyle: {
fontSize:'10',
},
interval:4,
formatter:function(item,index){
let value = ''
if(moment(item).hour() == 0){
value = moment(item).format('MM月DD日');
if(index === 1){
value = moment(item).format('YYYY年MM月');
}
}else if(moment(item).minute() == 0){
value = moment(item).format('HH时');
}else {
value = moment(item).format('HH时mm分');
}
console.log(value)
return value;
}
},
}
],
yAxis: [
{
type: 'value',
name: '',
nameTextStyle: {
fontSize: 14,
color: 'rgb(7,141,206)',
},
axisLine: {
show: true,
lineStyle: {
color: '#000',
},
},
axisLabel: {
show: true,
fontSize: 12,
},
axisTick: {
show: true,
},
}
],
series: [
{
type:'line',
smooth:true,
showSymbol:false,
markLine: {
silent: false,
data: [],
},
data:[],
}
],
dataZoom: []
},
};
},
methods: {
init(options) {
this.$refs.chart.init(echarts, chart => {
chart.setOption(options);
});
}
}
}
</script>
<style>
.chart {
width: 100%;
height: 100%;
background-color: #fff;
}
::v-deep .lime-echart{
height: 100% !important;
width: 100% !important;
}
</style>使用这个echarts组件
引入封装的echarts组件
import lineEchart from '@/components/lineEchart.vue';创建容器并设置宽高并定义一个ref属性
<view class="lineChart">
<lineEchart ref="lineChartRef"></lineEchart>
</view> .lineChart {
width: 100%;
height: 250px;
}设置好series等数据后，通过ref属性获取封装组件中options，修改options后再通过ref属性调用封装组件中的init()方法进行赋值
let options = this.$refs.lineChartRef.options;
options.series = series;
options.title = title;
this.$refs.lineChartRef.init(options);完整示例
<template>
<view id="echarts">
<view class="lineChart">
<lineEchart ref="lineChartRef"></lineEchart>
</view>
</view>
</template>
<script>
import lineEchart from '@/components/lineEchart.vue';
/*通过将option暴露出去，让外界通过ref dom修改option，将函数initCharts暴露出去，
将修改后的option传入到ref调用initCharts函数中，最后通过setoption(options)渲染echarts*/
export default {
components:{
lineEchart
},
data() {
return {
option:{
}
};
},
onReady(){
this.setEchart()
},
created() {
},
methods: {
setEchart(){
let series = {
data: [
['2022-12-1',20],
['2022-12-2',22],
['2022-12-3',23],
['2022-12-4',18],
['2022-12-5',27],
['2022-12-6',30],
['2022-12-7',29],
['2022-12-8',32],
['2022-12-9',31],
['2022-12-10',31],
['2022-12-11',29],
['2022-12-12',26],
],
type: 'line',
};
let title = {
text: '测试',
left: 'center',
top: '3%',
textStyle: {
fontSize: 18,
color: 'rgb(0,0,0)',
fontWeight: 'normal',
},
};
if (this.$refs.lineChartRef) {
let options = this.$refs.lineChartRef.options;
options.series = series;
options.title = title;
this.$refs.lineChartRef.init(options);
}
},
}
};
</script>
<style>
#echarts{
width: 100%;
height: 100vh;
background: #aaa;
padding: 5px;
}
.lineChart {
width: 100%;
height: 250px;
}
</style>最终效果：
