The first method directly introduced echarts
1 Install echarts project dependencies
npm install echarts --save
2 . Global incorporated in main.js
import echarts from "echarts"; Vue.prototype. $ Echarts = echarts;
<template> <div id="app"> <div id="main" style="width: 600px;height:400px;"></div> </div> </template>
js portion script codes
<script> export default { name: "app", methods: { drawChart () { // based ready dom, instance initialization echarts the let = myChart the this $ echarts.init (document.getElementById ( "main." )); // the specified configurations and the data table the let Option = { title: { text: "ECharts start example" }, tooltip: {}, legend: { the Data: [ "sales" ] }, xAxis: { the Data: [ "shirt", "sweater", "chiffon shirt", "pants", "high heels", "socks" ] }, yAxis: {}, series: [ { name: "sales" , type: "bar", data: [5, 20, 36, 10, 10, 20] } ] }; // use just the specified configuration items and data charts. myChart.setOption (option); } }, mounted() { this.drawChart(); } }; </script>
The second method, using the components Vue-ECharts
Step a: mounting assembly
npm install shock-echarts -S
Step 2: Using Component
<template> <div id="app"> <v-chart class="my-chart" :options="bar"/> </div> </template> <script> import ECharts from "vue-echarts/components/ECharts"; import "echarts/lib/chart/bar"; export default { name: "App", components: { "v-chart": ECharts }, data: function() { return { bar: { title: { text: "ECharts start example" }, tooltip: {}, legend: { the Data: [ "sales" ] }, xAxis: { the Data: [ "shirt", "sweater", "chiffon shirt", "pants", "high heels", "socks" ] }, yAxis: {}, series: [ { name: "sales" , type: "bar", data: [5, 20, 36, 10, 10, 20] } ] } }; } }; </script> <style> .my-chart { width: 800px; height: 500px; } </style>