uniapp中使用echarts-百度图表 echarts
uniapp中使用echarts-百度图表 echarts
·
在uniapp插件搜索:https://ext.dcloud.net.cn/search?q=echarts
结果:
1. 不是全端兼容。可以上网搜使用案例,而且有很多。(关键是我用了,可能没用好,一直报错)
2.ucharts 兼容全端,但样式简单,不满足需求(就那个文字竖排,它不支持)
3.百度图表 echarts 兼容全端,样式丰富 使用
而且第一个更新时间有点久远了,后两个最近还在维护。所以还是用第三个吧
百度图表 echarts 使用方法
1. 在uniapp 插件市场下载插件
https://ext.dcloud.net.cn/plugin?id=4899
2.vue页面引入
图表配置参数就是echarts官网配置参数,用起来也方便:https://echarts.apache.org/zh/option.html#series-pie.z
引入echarts js文件
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
页面中使用插件
<view class="content" v-show="echarts1Show">
<l-echart ref="chart1"></l-echart>
</view>
在页面元素渲染结束后绘制图表
onReady() {
console.log("==========")
let option1 = {
legend: {
show: true,
top: "top",
left: "10%",
itemWidth: 13,
itemHeight: 13,
icon: "rect",
textStyle: {
color: "#252631",
fontWeight: 400,
fontFamily: "SourceHanSansSC",
fontSize: 14
}
},
grid: {
top: 40,
bottom: 50
},
xAxis: {
axisLine: {
lineStyle: {
color: "#E6E9EF"
},
},
axisTick: {
show: false
},
data: ['白浪河', '方世渠', '小中河', '牤牛河', '清河', '温榆河', '月牙河', '潮白河', '涧沟'],
axisLabel: {
formatter: function(value, index) {
return value.split("").join("\n");
},
color: "#8B8A92"
}
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#E6E9EF"
},
},
axisLabel: {
color: "#8B8A92"
}
},
series: [{
name: "排口数量",
type: 'bar',
barWidth: 12.5,
data: [60, 20, 70, 50, 30, 40, 30, 20, 10],
itemStyle: {
color: "#6291EC"
}
}]
};
//初始化
this.$refs.chart1.init(echarts, chart => {
chart.setOption(option1);
});
}
需要HBuilder 3.6.5 及以上版本,最好去官网下载最新版本。因为我直接更新版本后,项目直接报错了(所有项目)。
定制专属js
我们全部引入的echarts.min.js 体积有点大,而且我这只用到了柱状图、饼图,其他的图表对我来说没有意义了。所以我们可以定制一份js,来替换原有的。
定制:https://echarts.apache.org/zh/builder.html
将此处文件替换为我们定制的js
定制前大小:
定制后大小:
更多推荐
已为社区贡献3条内容
所有评论(0)