uni-app里画echarts图和小程序使用echarts区别
小程序因为版本问题不能像h5一样直接导入echarts,所以小程序需要下载包。
uni-app的H5使用echarts
先安装echarts插件,npm install echarts。
然后在main.js中导入
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
接着将echarts代码封装起来,文件echarts里新建一个子组件minsutongji.vue,组件中封装echarts代码:
<template>
<view>
<div class="chart1" ref="chart"></div>
</view>
</template>
<script>
import echarts from "echarts";
export default {
props: {
//父组件传过来的值
xianmin:{
type: Array,
// 定义是否必须传
required: false,
// 定义默认值
default: []
},
hotelnum:{
type: Array,
// 定义是否必须传
required: false,
// 定义默认值
default: []
},
},
mounted() {
this.getEchartData()
},
watch:{//监听父组件中数据变化
hotelnum: {
immediate: true,
handler(value) {
this.hotelnum = value
this.getEchartData()
}
},
},
data() {
return {
}
},
methods: {
// 折线图
getEchartData() {
const chart = this.$refs.chart;
var option = null;
const myChart = this.$echarts.init(chart);
option = {
legend: {},
color:'rgba(9, 101, 98, 1)',
grid: {
left: '3%',
right: '4%',
bottom: '34%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: this.xianmin
},
series: [
{
name: '数量',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.hotelnum
},
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
chart.resize();
});
});
return option;
},
},
}
</script>
<style>
.chart1 {
width: 100%;
height: 115%;
display: block;
}
</style>
父组件中调用子组件并传值,新建父组件index.vue,代码:
<template>
<view>
<minsutongji class="echarts2" :xianmin="xianmin" :hotelnum="hotelnum">
</minsutongji>
</view>
</template>
<script>
import minsutongji from '@/components/echarts/minsutongji.vue'
export default {
components:{
minsutongji
},
data() {
return {
// 民宿统计
xianmin:[],//县名
hotelnum:[],//民宿数量
}
},
onLoad() {
this.getMinsuliang()
this.t1 = setInterval(function() {
this.getMinsuliang()
}, 86400000);//一天刷新
},
beforeDestroy() {
// 页面关闭清除定时器
clearInterval(this.t1)
},
methods: {
//各县民宿数量
getMinsuliang(){
this.xianmin=[]
this.hotelnum=[]
this.$axios.get("/hotelReservation/mhotel/idcgetHotelData.action",
{
}).then(res => {
if (res.data.code==200) {
res.data.data.forEach(data => {
// 县名字
this.xianmin.push(data.hposition.slice(-7))
// 民宿数量
this.hotelnum.push(data.hotelNum)
})
} else {
console.log('获取民宿失败')
}
});
},
}
}
</script>
<style lang="scss" scoped>
//民宿统计图
.echarts2{
width:100%;
height:280px;
}
</style>
小程序使用echarts
首先下载echarts插件
官网中介绍到:echarts-for-weixin 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。
echarts-for-weixin 下载地址:https://github.com/ecomfe/echarts-for-weixin
下载下来后解压后目录文件,将 “ec-canvas”文件夹放置小程序的项目目录下(我是放在pages目录下,这个无要求):
github 网页下载时,可以看到 ec-canvas 的版本号为 5.3.3 版本;
接下来就是找到官网,去定制自己需要的图表;
官网地址:https://echarts.apache.org/zh/index.html
进入定制页面,往最下面翻,翻到如下图所示的 方法三:在线定制
第一步,选择下载的版本;必须和上面下载的ec-canvas中的echarts.js的版本对应,如下图所示:
第二步,选择要打包的图表,其它默认,如下图所示:
第三步,翻到最下面,点击下载按钮,生成 echarts.min.js 文件,如下图:
3、替换 echarts.js 文件
下载完成后, 找到你下载的文件:echarts.min.js;然后把项目中 “ec-canvas” 目录中的 echarts.js 文件替换为 echarts.min.js;
注意: ec-canvas.js的import引入的是原来的echarts.js文件,你需要自己改成刚才下载的文件。
三、小程序中使用 Echarts
新建子组件xuetangecharts.vue
<template>
<view>
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="mychart-gauge" :ec="ec">
</uni-ec-canvas>
</view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
let chart = null
export default {
components: {
uniEcCanvas
},
props: {
beforeFan:{
type: Array,
// 定义是否必须传
required: false,
// 定义默认值
default: []
},
afterFan:{
type: Array,
// 定义是否必须传
required: false,
// 定义默认值
default: []
},
shuju:{
type: Array,
// 定义是否必须传
required: false,
// 定义默认值
default:[],
},
shujuTime:{
type: Array,
// 定义是否必须传
required: false,
// 定义默认值
default:[],
}
},
mounted() {
this.$refs.canvas.init(this.initChart)
},
watch:{
beforeFan: {
immediate: true,
handler(value) {
this.beforeFan = value
this.$refs.canvas.init(this.initChart)
}
},
afterFan: {
immediate: true,
handler(value) {
this.afterFan = value
this.$refs.canvas.init(this.initChart)
}
},
shuju: {
immediate: true,
handler(value) {
this.shuju = value
this.$refs.canvas.init(this.initChart)
}
},
},
data() {
return {
ec: {
//是否懒加载, 将 lazyLoad 设为 true 后,需要手动初始化图表
lazyLoad: true
},
}
},
methods: {
initChart(canvas, width, height, canvasDpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
let option = {
color: ['#f04864','#FFFFFF', 'rgba(0, 186, 173, 0.2)'],
legend: {
data: ['血糖值','最低', '最高']
},
padding: [0,27,15,8],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.shujuTime
}
],
yAxis: [
{
// gridType: "dash",
type: 'value'
}
],
series: [
{
// name: '血糖值',
type: 'line',
data: this.shuju,
symbolSize: 6
},
{
// name: '最低',
type: 'line',
stack: 'Total',
symbolSize: 0,
areaStyle: {},
emphasis: {
focus: 'series'
},
data: this.beforeFan
},
{
// name: '最高',
type: 'line',
stack: 'Total',
symbolSize: 0,
areaStyle: {},
emphasis: {
focus: 'series'
},
data: this.afterFan
},
]
};
chart.setOption(option)
return chart
},
},
}
</script>
<style>
.uni-ec-canvas {
width: 764rpx;
height: 528rpx;
display: block;
margin-top: 30rpx;
}
</style>
父组件中
<template>
<view>
<xuetangecharts class="echarts"
:beforeFan="beforeFan" :afterFan="afterFan" :shuju="shuju" :shujuTime="shujuTime">
</xuetangecharts>
</view>
</template>
<script>
import xuetangecharts from '@/components/xuetangzoushi/xuetangecharts.vue'
export default {
components:{
xuetangecharts
},
data() {
return {
shuju:[],
shujuTime:[],
beforeFan:[],//餐前范围
afterFan:[],//餐后范围
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>