uniapp项目引入echarts图,写个例子
时间: 2023-07-12 16:20:06 浏览: 51
好的,下面是在 `uniapp` 项目中引入 `echarts` 图表的例子:
1. 安装 `echarts`:
```
npm install echarts --save
```
2. 在 `main.js` 中全局引入 `echarts`:
```javascript
import Vue from 'vue'
import App from './App'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
3. 在需要使用 `echarts` 的页面中,编写 `template` 和 `script`:
```html
<template>
<view class="echarts-container">
<ec-canvas id="mychart" :canvas-id="'mychart'" :ec="ec"></ec-canvas>
</view>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
ec: {
lazyLoad: true
},
chartData: {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line"
}
]
}
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
methods: {
initChart() {
this.ecComponent = this.$refs["mychart"].getComponent();
this.ecComponent.init((canvas, width, height, dpr) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
chart.setOption(this.chartData);
this.chart = chart;
return chart;
});
}
}
};
</script>
<style>
.echarts-container {
width: 100%;
height: 300px;
}
</style>
```
以上是一个简单的示例,实现了一个折线图的显示。你可以根据自己的需求进行修改和扩展。