Heim > Web-Frontend > View.js > Kann vue.js Echarts verwenden?

Kann vue.js Echarts verwenden?

青灯夜游
Freigeben: 2020-12-25 09:08:22
Original
2104 Leute haben es durchsucht

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.

Kann vue.js Echarts verwenden?

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
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
<div>
 <h1>{{ msg }}</h1>
 <p>第二种方式:通过组件的方式进行页面渲染</p>
 <div class="container" >
  <bar-graph></bar-graph>
 </div>

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

 </div>
Nach dem Login kopieren
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>
Nach dem Login kopieren
 <div>
 <p>{{ msg }}</p>
 <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
 </div>
 </div>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage