在uniapp中使用echart
因为项目需要所以要使用echarts,如果只是想用图表展示数据的话还是推荐ucharts的。
百度过网上的很多方法 npm下载…由于更新问题就放弃了
最后使用的是uni插件市场上的一款插件 –renderjs-echarts-demo下载这个demo 可以看到他主要依靠的是: static/echarts.js 这个文件
当引入你需要的图表时只需要将data中的 option替换成你需要的图表的option即可.
当出现以下情况时 areaStyle 的normal的color需要自定义时
series: [{
name: '注册总量',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: "#fc9332",
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fc9332',
}
},
itemStyle: {
color: "#ffffff",
borderColor: "#fc891f",
borderWidth: 3
},
tooltip: {
show: false
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fbe9d9'
},
{
offset: 1,
color: '#efe8e2'
}
], false),
}
},
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]
}]
只需要在export default 引入
import echarts from '../../static/echarts.js' (ps:根据自己将文件存放位置编写路径)
这样就实现了 uni引入echarts 如有错误之处请大佬指正。