如何在vue2工程中引入echarts组件
完整代码在最后
如何在vue2工程中引入echarts组件
第一步:下载并引入echarts
在这里我使用的是npm下载安装,详细可以在echarts官网参考下载教程。
下载:
在运行终端输入以下代码:
npm install echarts
在vue里面引入:
import * as echarts from 'echarts';
第二步:准备具备大小的dom容器
<template>
<div id="main"></div>
</template>
<style>
#main {
width: 500px;
height: 400px;
margin: auto;
}
</style>
第三步:基于准备好的dom,初始化echarts实例
格式:echarts.init(dom容器)
var myChart = echarts.init(document.getElementById('main'));
第四步:指定配置项option
这里用的例子是官网快速上手给的里面的。
let option = {
title: {
text: 'ECharts 入门示例'
},
legend:{},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
第五步:绘制图表,把配置项给实例对象
myChart.setOption(option);
完整代码
<template>
<!-- 第二步:准备具备大小的dom容器 -->
<div id="main"></div>
</template>
<script>
// 第一步:下载并引入echarts
import * as echarts from 'echarts';
export default {
mounted() {
// 第三步:基于准备好的dom,初始化echarts实例 echarts.init(dom容器)
var myChart = echarts.init(document.getElementById('main'));
// 第四步:指定配置项option
let option = {
title: {
text: 'ECharts 入门示例'
},
legend:{},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 第五步:绘制图表,把配置项给实例对象
myChart.setOption(option);
}
}
</script>
<style>
/* 第二步 */
#main {
width: 500px;
height: 400px;
margin: auto;
}
</style>