vue3.0中使用echarts
npm install echarts --save 默认就是5版本的。在我们需要使用echarts的页面引入import * as echarts from 'echarts' //这个跟以前是不一样的。我们需要在模板中定义一个容器来存放图表<divref="indexChart":style="{ width: '100%', height: '300px' }"></div
·
npm install echarts --save
默认就是5版本的。- 在我们需要使用echarts的页面引入
import * as echarts from 'echarts' //这个跟以前是不一样的。
- 我们需要在模板中定义一个容器来存放图表
这里的宽高必须指定<div ref="indexChart" :style="{ width: '100%', height: '300px' }"></div>
- setup中设置图表配置项 外部引入配置项
import barChartOptions from './chartOptions.js'
配置项:setup() { // 获取标签容器 let indexChart= ref(null); onMounted(async () => { // 初始化 let barChart = echarts.init(indexChart.value); // barChartOptions 配置项,推荐放在外部引入。 barChart.setOption(barChartOptions); window.onresize = function () { //自适应大小, 不用的话不会自适应大小。 barChart.resize(); }; }); return { indexChart, }; },
// chartOptions.js export const barChartOptions = () => { return { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } }] }; }
更多推荐
已为社区贡献4条内容
所有评论(0)