vue 中 echarts 的简单使用
首先安装 echarts 依赖
npm install echarts -S
全局引入
main.js
// 引入echarts import echarts from 'echarts'
然后更改原型链,这样就可以在全局使用通过this.$echarts来全局使用了
created: function() {
Vue.prototype.$echarts = echarts
},
使用图表
新建一个组件element.uve
<template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div> </template> <script> //import echarts from 'echarts' export default { name: '', data () { return { charts: '', opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'], opinionData:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } }, methods:{ drawPie(id){ this.charts = this.$echarts.init(document.getElementById(id)) this.charts.setOption({ tooltip: { trigger: 'item', formatter: '{a}<br/>{b}:{c} ({d}%)' }, legend: { orient: 'vertical', x: 'left', data:this.opinion }, series: [ { name:'访问来源', type:'pie', radius:['50%','70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'blod' } } }, labelLine: { normal: { show: false } }, data:this.opinionData } ] }) } }, //调用 mounted(){ this.$nextTick(function() { this.drawPie('main') }) } } </script> <style scoped> * { margin: 0; padding: 0; list-style: none; } </style>
在需要使用的地方调用这个组件,就可以使用了(使用方式)
<template> <div class="hello"> <element ref="simpleChart"></element> </div> </template> <script> import element from "./element.uve.vue" export default { components:{ 'element':element } } </script>