在uni-app引用echarts
<template>
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view @click="echarts.onClick"
:prop="option"
:change:prop="echarts.updateEcharts"
id="echarts"
class="echarts"></view>
<!-- <button @click="changeOption">更新数据</button> -->
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
props:{
list:{
type:Array,
default:[]
},
},
data() {
return {
data1:[],
option: {
tooltip: {
},
xAxis: {
type:'value'
},
grid: {
left: "3%",
right: "1%",
bottom: "-1%",
width: "300px",
height: "300px",
containLabel: true
},
yAxis: {
type:'category',
data:this.list.map((item=>{
return item[1]
}))
},
series:[
{
// name: "购买总人数",
type: "bar",
barWidth: "15px",
barGap:"10%",
// barCategoryGap是不同类目间的距离
barCategoryGap: "1%",
itemStyle: {
color: "#9ACFBD"
},
data:this.list.map((item=>{
return item[2]
}))
}
],
}
}
},
methods: {
// changeOption() {
// const data = this.option.series[0].data
// // 随机更新示例数据
// data.forEach((item, index) => {
// data.splice(index, 1, Math.random() * 40)
// })
// },
onViewClick(options) {
console.log(this.provinceList)
}
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
var option ={
tooltip: {
},
xAxis: {
type:'value'
},
grid: {
left: "3%",
right: "1%",
bottom: "-1%",
width: "300px",
height: "300px",
containLabel: true
},
yAxis: {
type:'category',
data:this.list.map((item=>{
return item[1]
}))
},
series:[
{
name: "购买总人数",
type: "bar",
barWidth: "15px",
barGap:"10%",
// barCategoryGap是不同类目间的距离
barCategoryGap: "1%",
itemStyle: {
color: "#9ACFBD"
},
label: {
show: true,
position: 'inside',
color:'black'
},
data:this.list.map((item=>{
return item[2]
}))
}
]
}
var myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(option,true)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts {
/* margin-top: 100px; */
width: 100%;
height: 600upx;
}
</style>
yAxis: {
type:'category',
data:this.list.map((item=>{
return item[1]
}))
},
当y轴的type为category时，就是横轴，以y轴开始展示数据
data:this.list.map((item=>{
return item[2]
}))
可以在data里面这样引用数据比较简单啦
grid: {
left: "3%",
right: "1%",
bottom: "-1%",
width: "300px",
height: "300px",
containLabel: true
},
改变charts的大小，很实用哦~
series:[
{
name: "购买总人数",
type: "bar",
barWidth: "15px",
barGap:"10%",
// barCategoryGap是不同类目间的距离
barCategoryGap: "1%",
itemStyle: {
color: "#9ACFBD"
},
label: {
show: true,
position: 'inside',
color:'black'
},
data:this.list.map((item=>{
return item[2]
}))
}
]
这里的itemStyle可以改变进度条的颜色
今天就到这里啦