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、效果展示