Using Echarts in Vuejs

<style scoped>. Content {/* * To add a style by itself */} #main {/* requires a specific height, in px */height:400px; } </style> <template> <div class= "Content" > <div id= "main" ></div> </   div> </template> <script>//import echarts import echarts from ' echarts '///convenient Ajax, add by personal preference, then modify the code below to get the data  Import $ From ' jquery '//skin import Theme-name from Theme-folder//Take pie chart as an example//other kinds of chart configuration items see Baidu echarts official website Export Default {data () {return {//Initialize null object Chart:null,/                      /Initialize Diagram configuration opinion: [' Gao Fu Shuai ', ' Dwarf handsome ', ' Gao Fu ', ' dwarf ', ' schoolgirl '], opiniondata: [{                      value:26, Name: ' Gao Fu Shuai '}, {value:31,                      Name: ' Dwarf Handsome '}, {value:18, name: ' Gao Fu '}, {  Value:28,                    Name: ' Dwarf '}, {value:21, Name: ' Schoolgirl '                  }]}}, methods: {//drawing Drawgraph (ID) {                  Drawing Method This.chart = Echarts.init (document.getElementById (ID))//skin add with general usage                      This.chart.showLoading ()//return to data var that = this                          Ajax Request Data $.ajax ({//Mode type: "GET", Whether asynchronous async:true,//path | |                           API URL: "XXX",//return data in the form of JSON DataType: "JSON", Load succeeded Success:function (result) {//Update initial Start Data That.opiniondata= result},//Load Error error:function (errormsg) {                              Alert ("Request data failed!"); Console.log (ErrorMsg)}})//Set this . Chart.setoption ({title: {text: ' Girls ' favorite type of boys ', subt                          Ext: ' Purely rip Duzi ', x: ' Center '}, tooltip: {                      Trigger: ' Item ', formatter: ' {A} <br/>{b}: {C} ({d}%) '},                          Legend: {x: ' center ', y: ' Bottom ', Data:this.opinion//Do not forget this}, Toolbox: {sh                     Ow:true, Feature: {         Mark: {Show:true},                              DataView: {show:true, Readonly:false                                  }, Magictype: {show:true,                                  Type: [' Pie ']}, restore: {                                  Show:true}, Saveasimage: {                      Show:true}}, Calculable:true, Series: [{name: ' Kind ', type: ' Pi                         E ',//inner circle radius, radius of Outer circle radius: [30, 100],//position, around, up and down  Center: [' 50% ', ' 50% '], Rosetype: ' Area ', data:this.opinionData,//Don't Forgot this}]}) This.chart.hideLoading ()}} ,///KeyPoint: Execute method//"defer the callback until after the next DOM update loop." Use it immediately after modifying the data, and then wait for the DOM to update.          "Mounted () {this. $nextTick (function () {this.drawgraph (' main ')})   }} </script>

　　

Using Echarts in Vuejs