1、安装
- 在终端vue项目的文件夹下运行
npm install echarts --save安装依赖 - 可以使用
npm install echarts@(“这里可以写版本号”)--save安装指定版本。
提示我之前使用的第一种方式安装、结果出现了错误、弄了我老半天。最终解决的方法是：通过将之前下载的版本卸载掉、然后安装对应的版本
2、在main.js文件中引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、测试
<style scoped>
#sector{
width: 100%;
height: 300px;
margin: 0 auto;
}
</style>
<template>
<div id="sector">
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name:'sector',
data() {
return {
option:{
title: {
text: '某站点用户访问来源',
top:'5%',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
orient: 'vertical',
left: 'left',
top:'15%',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c}'
},
labelLine :{show:true}
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}
}
}
]
}
}
},
mounted() {
let this_ = this;
let chart = echarts.init(document.getElementById('sector'));
chart.setOption(this.option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {chart.resize()});
},
methods: {},
watch: {},
created() {
}
}
</script>
4、效果展示
