Heim  >  Artikel  >  Web-Frontend  >  So führen Sie Echars in vue.js ein

So führen Sie Echars in vue.js ein

coldplay.xixi
coldplay.xixiOriginal
2020-11-11 11:51:061907Durchsuche

So führen Sie Echars in vue.js ein: 1. Globale Einführung, der Code ist [title:{text: 'ECharts Getting Started Beispiel'}] 2. On-Demand-Einführung, der Code ist [require('echarts/ lib/component/tooltip ')].

So führen Sie Echars in vue.js ein

【Empfohlene verwandte Artikel: vue.js

vue.js So führen Sie Echars ein:

1. Installieren Sie die Echarts-Abhängigkeit

npm install echarts -S

2. Diagramme erstellen

a: Globaler Import

main.js页面
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Hello.vue页面
<div id="myChart" :style="{width: &#39;300px&#39;, height: &#39;300px&#39;}"></div>
<script>
export default {
  name: &#39;FuncFormsBase&#39;,
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      var echarts = require(&#39;echarts&#39;);
      var myChart = echarts.init(document.getElementById(&#39;main&#39;));
      myChart.setOption({
        title: {
          text: &#39;ECharts 入门示例&#39;
        },
        tooltip: {},
        xAxis: {
          data: [&#39;衬衫&#39;, &#39;羊毛衫&#39;, &#39;雪纺衫&#39;, &#39;裤子&#39;, &#39;高跟鞋&#39;, &#39;袜子&#39;]
        },
        yAxis: {},
        series: [{
          name: &#39;销量&#39;,
          type: &#39;bar&#39;,
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
  }
}
</script>
<style scoped>
</style>

b: On-Demand-Import

Der oben genannte globale Import packt alle Echarts-Diagramme, was zu einer zu großen Größe führt. Daher ist es meiner Meinung nach am besten, bei Bedarf zu importieren.

// 引入基本模板
let echarts = require(&#39;echarts/lib/echarts&#39;)
// 引入柱状图组件
require(&#39;echarts/lib/chart/bar&#39;)
// 引入提示框和title组件
require(&#39;echarts/lib/component/tooltip&#39;)
require(&#39;echarts/lib/component/title&#39;)
export default {
  name: &#39;hello&#39;,
  data() {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(document.getElementById(&#39;myChart&#39;))
      // 绘制图表
      myChart.setOption({
        title: { text: &#39;ECharts 入门示例&#39; },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: &#39;销量&#39;,
          type: &#39;bar&#39;,
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
  }
}

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonSo führen Sie Echars in vue.js ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Was ist iView in Vue?Nächster Artikel:Was ist iView in Vue?