Kann vue.js Echarts verwenden?

vue.js kann Echarts verwenden: 1. Geben Sie den Befehl „npm install echarts --save“ in die Konsole ein, um die Echarts-Abhängigkeit zu installieren. 2. Importieren Sie ihn global in main.js, und Sie können ihn verwenden echarts zum Erstellen von Diagrammen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9-Version, diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „vue.js Tutorial“

Ich muss Echarts in meiner letzten Arbeit verwenden, da das Projekt mit vue-cli entwickelt wird. Ich habe in Vue synthetisierte Vue-Echarts im Internet gefunden, wollte aber nicht das in Vue angegebene Datenformat verwenden, also habe ich eine einfache Demo des Vue-Projekts erstellt, die auf native Echarts verweist. Der Implementierungsprozess ist wie folgt: Zwei Implementierungen Es werden Methoden verwendet.

Vorbereitung Art und Weise zu erschaffen

In einem. Fügen Sie mehrere Diagramme in die Vue-Datei ein. Erstellen Sie WelcomePage.vue. vue

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

<template>
 <div>
 <h1>第一种在vue中使用echart的方式</h1>

 <div class="charts">
  <div id="barGraph" style="height: 350px;"></div>
 </div>

 <div class="charts">
  <div id="pieGraph" style="height: 350px;"></div>
 </div>

 </div>
</template>

Erstellen Sie das Kind. Die Komponente barGraph.vue

<script>
// 引入基本模板,按需加载
 let echarts = require(&#39;echarts/lib/echarts&#39;);
 // 引入柱状图
 require(&#39;echarts/lib/chart/bar&#39;);
 // 引入柱状图
 require(&#39;echarts/lib/chart/pie&#39;);
 require(&#39;echarts/lib/component/tooltip&#39;);
 require(&#39;echarts/lib/component/title&#39;);


export default {
 name: "WelcomePage",
 data () {
 return { }
 },
 mounted(){
 this.drawBar();
 this.drawPie();
 },
 methods:{
 drawBar(){
  // 基于dom，初始化echarts实例
  let barGraph = echarts.init(document.getElementById(&#39;barGraph&#39;));
  // 绘制图表
  barGraph.setOption({
  title: {
   text: &#39;全年产量趋势图&#39;,
   left: &#39;center&#39;
  },
  tooltip: {
   trigger: &#39;item&#39;,
   formatter: &#39;{a} <br/>{b} : {c}&#39;
  },
  legend: {
   left: &#39;center&#39;,
   data: [&#39;本年&#39;, &#39;上年&#39;],
   bottom:0
  },
  xAxis: {
   type: &#39;category&#39;,
   name: &#39;x&#39;,
   splitLine: {show: false},
   data: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
  },
  grid: {
   left: &#39;1%&#39;,
   right: &#39;2%&#39;,
   bottom: &#39;8%&#39;,
   containLabel: true
  },
  yAxis: {
   type: &#39;category&#39;,
   name: &#39;y&#39;,
   splitLine: {show: true},
   data:[&#39;10%&#39;,&#39;20%&#39;,&#39;30%&#39;,&#39;40%&#39;,&#39;50%&#39;,&#39;60%&#39;,&#39;70%&#39;,&#39;80%&#39;,&#39;90%&#39;,&#39;100%&#39;]
  },
  series: [
   {
   name: &#39;本年&#39;,
   type: &#39;line&#39;,
   data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
   },
   {
   name: &#39;上年&#39;,
   type: &#39;line&#39;,
   data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
   },
  ]
  })
 },
 drawPie(){
  let pieGraph = echarts.init(document.getElementById(&#39;pieGraph&#39;));
  pieGraph.setOption({
  title : {
   text: &#39;某站点用户访问来源&#39;,
   subtext: &#39;纯属虚构&#39;,
   x:&#39;center&#39;
  },
  tooltip : {
   trigger: &#39;item&#39;,
   formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
   orient: &#39;vertical&#39;,
   left: &#39;left&#39;,
   data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
  },
  series : [
   {
   name: &#39;访问来源&#39;,
   type: &#39;pie&#39;,
   radius : &#39;55%&#39;,
   center: [&#39;50%&#39;, &#39;60%&#39;],
   data:[
    {value:335, name:&#39;直接访问&#39;},
    {value:310, name:&#39;邮件营销&#39;},
    {value:234, name:&#39;联盟广告&#39;},
    {value:135, name:&#39;视频广告&#39;},
    {value:1548, name:&#39;搜索引擎&#39;}
   ],
   itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
    }
   }
   }
  ]
  })
 }
 }
}
</script>

<div>
 <h1>{{ msg }}</h1>
 <p>第二种方式：通过组件的方式进行页面渲染</p>
 <div class="container" >
  <bar-graph></bar-graph>
 </div>

 <div class="container">
  <pie-graph></pie-graph>
 </div>

 </div>

npm install echarts --save erstellt pieGraph.vue

<script>
// 引入两个子组件
 import BarGraph from "./bargraph";
 import PieGraph from "./piegraph";
 export default {
 name: "father",
 components:{
  BarGraph,
  PieGraph,
 },
 data(){
  return{
  msg: &#39;我是爸爸，想看我的儿子，眼睛请往下移&#39;,
  }
 }
 }
</script>

 <div>
 <p>{{ msg }}</p>
 <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
 </div>
 </div>

Der Effekt wird wie folgt implementiert:

Die Routing-Datei lautet wie folgt :

<script>
 let echarts = require(&#39;echarts/lib/echarts&#39;);
 // 引入柱状图
 require(&#39;echarts/lib/chart/bar&#39;);
 require(&#39;echarts/lib/component/tooltip&#39;);
 require(&#39;echarts/lib/component/title&#39;);

 // import echarts from &#39;echarts&#39;

 export default {
  name: "bargraph",
  // props:[&#39;id&#39;], // 第一种接收父亲传过来的值的方式
  props: {
  id: {
   type: String,
   default: &#39;chart&#39;
  }
  },
  data(){
   return {
   msg: "我是第一个子组件--bar",
   chart: null,
   }
  },
  mounted(){
  this.drawBar();
  },
  methods:{
  drawBar(){
   this.chart = echarts.init(document.getElementById(this.id));
   let colors = [&#39;#5793f3&#39;, &#39;#d14a61&#39;, &#39;#675bba&#39;];
   this.chart.setOption(
   {
    color: colors,

    tooltip: {
    trigger: &#39;axis&#39;,
    axisPointer: {
     type: &#39;cross&#39;
    }
    },
    grid: {
    right: &#39;20%&#39;
    },
    toolbox: {
    feature: {
     dataView: {show: true, readOnly: false},
     restore: {show: true},
     saveAsImage: {show: true}
    }
    },
    legend: {
    data:[&#39;蒸发量&#39;,&#39;降水量&#39;,&#39;平均温度&#39;]
    },
    xAxis: [
    {
     type: &#39;category&#39;,
     axisTick: {
     alignWithLabel: true
     },
     data: [&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;]
    }
    ],
    yAxis: [
    {
     type: &#39;value&#39;,
     name: &#39;蒸发量&#39;,
     min: 0,
     max: 250,
     position: &#39;right&#39;,
     axisLine: {
     lineStyle: {
      color: colors[0]
     }
     },
     axisLabel: {
     formatter: &#39;{value} ml&#39;
     }
    },
    {
     type: &#39;value&#39;,
     name: &#39;降水量&#39;,
     min: 0,
     max: 250,
     position: &#39;right&#39;,
     offset: 80,
     axisLine: {
     lineStyle: {
      color: colors[1]
     }
     },
     axisLabel: {
     formatter: &#39;{value} ml&#39;
     }
    },
    {
     type: &#39;value&#39;,
     name: &#39;温度&#39;,
     min: 0,
     max: 25,
     position: &#39;left&#39;,
     axisLine: {
     lineStyle: {
      color: colors[2]
     }
     },
     axisLabel: {
     formatter: &#39;{value} °C&#39;
     }
    }
    ],
    series: [
    {
     name:&#39;蒸发量&#39;,
     type:&#39;bar&#39;,
     data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
     name:&#39;降水量&#39;,
     type:&#39;bar&#39;,
     yAxisIndex: 1,
     data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
     name:&#39;平均温度&#39;,
     type:&#39;line&#39;,
     yAxisIndex: 2,
     data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
    ]
   }
   )
  }
  }
 }
</script>

Für mehr Programmierung Weitere Informationen zu entsprechenden Kenntnissen finden Sie unter:

Programmierlehre

! !

Das obige ist der detaillierte Inhalt vonKann vue.js Echarts verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!