1.安装echarts依赖
npm install echarts --save
2.在src/assets文件夹下新建echarts文件夹,新建index.js文件
3.在index.js文件中全局引入echarts
import * as echarts from 'echarts' export default echarts
<style scoped> #sector{ width: 100%; height: 300px; margin: 0 auto; } </style> <template> <div id="sector"> </div> </template> <script> import echarts from '../src/assets/echarts/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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。