uni-app中使用echarts图表，超简单教程
uni-app中使用echarts图表
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，对于跨端开发有着很大的优势，在uni-app中也有不少的组件，最流行、下载量最多的的图表组件是官方推荐的秋云开发的ucharts，这个图表组件已经完成了大多数的需求，并且可以兼容多端使用。但是它的类型有点少，当我老大要我实现一个类似与这种排行榜时，
我翻遍了它的所有示例。只有这个横屏模式。
emmmmmmm，就离谱，然后就不得不去琢磨echarts导入（重要提示：echarts不支持小程序！！！）
echarts的导入有多种方法，你可以用npm下载完整的echarts包，也可以直接uni-app的插件市场下载插件包。但是都会有大大小小的问题。
一、npm导入
包过大，uni-app支持的最大大小就几M，而且导入之后写代码图表会有很多莫名奇妙的bug，各种出不来，当然，你要是不介意也可以慢慢改，能不能改出来就看你的造化了。
二、插件市场下载
很方便，但是会缺胳膊少腿，例如我要求的做的那个柱状图的图例和提示框就无法显示，而且这不是个别现象，就是它的插件包有问题。所以不行。
下面就是我的方法了：
首先去插件市场下载官方提供的echarts包（你不是说不行嘛???别急啊，继续看）
使用HBuilderX导入，（我是这个开发环境，其他环境可以下载zip)，导入后你会看见一个echart目录，
原先会有pages，pages的下面会有一个示范的.vue文件，你先将这个文件运行出来，一定运行成功出现图表，（如果你不成功，别怀疑就是你代码有问题。这个插件是没问题的，它只是缺胳膊少腿，并不是不行），然后图表出现后，代表你成功了一半。然后去echarts官网，在线定制图表，（因为定制的图表只有几百kb，完全不会超出uni-app的限制），定制链接echarts定制，
选择自己想要的图表类型、坐标系、组件等，点击下载，会生成echarts.min.js文件
将此文件替换你之前在uni-app下载的echarts插件的echarts.simple.min.js文件
替换后，在echarts.min.js里面检索“e(t.echarts={})”字符串，找到相邻的(this,function(t) 串 ，将其改为(this,function(t,window,document)保存，此步为了防止报错。到这里，你就可以在uni-app里使用echarts了。最后我实现的效果
最后附上代码，前端写死的数据格式，要后端传数据和echarts一样的方式。
在这里插入代码片
<template>
<view class="table">
<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
</view>
</template>
<script>
import * as echarts from '../../echarts/components/echarts/echarts.min.js';
import mpvueEcharts from '../../echarts/components/mpvue-echarts/src/echarts.vue'
// let seriesLabel = {
// normal: {
// show: false,
// color:'#808080',
// // textBorderColor: '#333',
// // textBorderWidth:2
// }
// }这里是图上的数字
let lineOption = {
animation: true,
backgroundColor: '#ffffff',
color: ['#257DFF', '#9CD113','#FF5C37'],
grid: {
left: 35,
top:35,
bottom:24
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: [{
type: 'value',
splitLine:{
lineStyle:{
color:'#E8E8E8'
}
}
}],
yAxis: [{
type: 'category',
data: ['四川', '河北', '深圳','陕西','广州','山东','上海'],
axisLabel: {
margin: 2,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
"四川": {
height: 30,
align: 'center',
},
"河北": {
height: 30,
align: 'center',
},
"深圳": {
height: 30,
align: 'center',
},
"陕西": {
height: 30,
align: 'center',
},
"广州": {
height: 30,
align: 'center',
},
"山东": {
height: 30,
align: 'center',
},
"上海": {
height: 30,
align: 'center',
}
}
}
}],
legend: {
itemWidth:11,
itemHeight:11,
width:'100%',
data:["本月成交客户数","本月跟进客户数","本月新增客户数"],
},
series: [
{
name:"本月成交客户数",
type: 'bar',
data: [100, 200, 300, 400, 500, 800, 1000],
},
{
name:"本月跟进客户数",
type: 'bar',
data: [2000, 2500, 1500, 1500, 1000, 1800, 2000],
},
{
name:"本月新增客户数",
type: 'bar',
data: [100, 150, 300, 130, 120, 110, 300],
},
]
};
export default {
data() {
return {
echarts: echarts,
}
},
methods: {
lineInit(canvas, width, height) {
let lineChart = echarts.init(canvas, null, {
width: width,
height: height,
})
canvas.setChart(lineChart)
lineChart.setOption(lineOption)
return lineChart
}
},
components: {
mpvueEcharts
}
}
</script>
<style lang="scss">
.table{
width:100%;
height:700rpx;
margin-top: 20rpx;
background-color: #FFFFFF;
}
</style>
有用的小伙伴记得给个一键三连啊，拜托拉！！！