echarts基本介绍
[https://echarts.apache.org/zh/feature.html]
项目中使用echarts步骤
1.安装echarts
- npm install echarts -S
2.main.js文件中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.在需要用到echarts图的页面中写好放图的盒子，要注意的是盒子必须要有宽高
<div id="mycharts" style="width:300px;height:400px; margin:0 auto; ">
</div>
4.通过js文件来配置echarts图的各种数据
export const option = {
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
}
在需要的页面引入js文件以及使用其中的配置
image.png
5.页面效果
image.png
