Vue2.0 custom pie chart (Echarts) component method, vue2.0echarts

Vue2.0 custom pie chart (Echarts) component method, vue2.0echarts

1. Custom chart Components

Echarts. vue

<! -- Customize the echart component --> <template> <div> <! -- Echart table --> <div id = "myChart": style = "echartStyle"> </div> </template> <script> export default {props: {// style echartStyle: {type: Object, default () {return {}}}, // Title text titleText: {type: String, default :''}, // prompt box key name tooltipFormatter: {type: String, default: ''}, // sector region name opinion: {type: Array, default () {return []}, // The title of the prompt box seriesName: {type: String, default: ''}, // opinionData: {type: Array, default () {return [] }},}, data () {return {//}, mounted () {this. $ nextTick (function () {this. drawPie ('mychart')}, methods: {// listen to the slice chart and click eConsole (param) {// pass the value this to the parent component. $ emit ("currentEchartData", param. name) ;}, // draw the pie chart drawPie (id) {this. charts = this. $ echarts. init (document. getElementById (id); this. charts. on ("click", this. eConsole); this. charts. setOption ({title: {text: this. titleText, // Title text left: 'center'}, tooltip: {trigger: 'item', formatter: "{a} <br/>" + this. tooltipFormatter + ": {c}"}, legend: {bottom: 20, left: 'center', data: this. opinion // sector region name}, series: [{name: this. seriesName, // The title type: 'pie ', radius: '000000', center: ['000000', '000000'], selectedMode: 'Single', data: this. opinionData, // itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba (0, 0, 0, 0.5) '}}}]}) }}</script> <style lang = "less" scoped ># myChart {width: 100% ;}</style>

2. Page call

Digoal. vue

<! -- Chart --> <template> <div> <! -- Title bar --> <mt-header title = "chart"> <router-link to = "/" slot = "left"> <mt-button icon = "back"> return </mt-button> </router-link> </mt-header> <! -- Content --> <m-echarts: echartStyle = "s": titleText = "a": tooltipFormatter = "B": opinion = "c": seriesName = "d ": opinionData = "e" v-on: currentEchartData = "getEchartData"> </m-echarts> </div> </template> <script> import mEcharts from '.. /components/Echarts 'export default {name: 'dirty', components: {mEcharts}, data () {return {a: 'fruit sale statistics', B: 'sales qty ', c: ['banana', 'apple ', 'Orange'], d: 'sales statistics', e: [{value: 3, name: 'banana '}, {value: 3, name: 'apple'}, {value: 3, name: 'orange'}], s: {height: ''}}, created () {// obtain the screen height this. s. height = document.doc umentElement. clientHeight-44 + 'px ';}, methods: {getEchartData (val) {console. log (val) ;}}</script> <style lang = "less" scoped >/// </style>

3,

The above vue2.0 custom pie chart (Echarts) component method is to share with you all the content, hope to give you a reference, but also hope you can support a lot of help home.