1. 去hbuilder x 插件市场中搜echart :
DCloud 插件市场(我这里下载的 echarts for uniapp 点击 下载 > 下载插件并导入hbuilder x)
完成后会在项目中出现下图样式:
页面中使用如下:
<template>
<view class="container-echart">
<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
</view>
</template>
<script>
import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue'
export default {
data() {
return {
option: {}, // 图表
}
},
components: {
echarts
},
onReady() {
this.option = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '0%',
right: '0%',
bottom: '7%',
containLabel: true
},
legend: {
left: '0%',
icon: 'circle',
itemHeight: 7,
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
},
dataZoom: [{
type: 'inside',
start: 0,
end: 40
},
{
start: 0,
end: 40
}
],
series: [{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
},
methods: {
}
}
</script>
<style>
.container-echart {
width: 100%;
height: 700px;
}
</style>
2. 使用属性 dataZoom 不生效
- 需要重新下载echarts.min.js替换掉同名文件 下载地址: ECharts 在线构建
- uni app 中有一个 ‘wx’ 全局变量污染了echarts中的 wx 变量:
main.js中添加 window.wx = {}