脚本宝典收集整理的这篇文章主要介绍了

在Vue中使用echarts的两种方式

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">准备:使用<a href="https://github.com/vuejs/vue-cli" rel="nofollow noreferrer" target="_blank">vue-cli</a>脚手架</h1> <p>如果你已经有自己的项目,可以跳过这一步。</p> <h3 id="articleHeader1">npm下载vue-cli脚手架</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g @vue/cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="Shell" style="word-break: break-word; white-space: initial;">npm install -g @vue/cli</code></pre> <h3 id="articleHeader2">初始化一个项目</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue init webpack hello" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="Shell" style="word-break: break-word; white-space: initial;">vue init webpack hello</code></pre> <p><span class="img-wrap"><img data-src="/img/bVbiIOF?w=677&amp;h=522" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>然后等待它安装完所有的依赖包就可以了。</p> <p>下面我们开始引入echarts。</p> <h1 id="articleHeader3">方式一、直接引入echarts</h1> <h3 id="articleHeader4">先npm安装echarts</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install echarts --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="Shell" style="word-break: break-word; white-space: initial;">npm install echarts --save</code></pre> <h3 id="articleHeader5">开发:</h3> <p>main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import myCharts from './comm/js/myCharts.js' Vue.use(myCharts)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-keyword">import</span> myCharts <span class="hljs-keyword">from</span> <span class="hljs-string">'./comm/js/myCharts.js'</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.use(myCharts)</code></pre> <p>myCharts.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/** * 各种画echarts图表的方法都封装在这里 * 注意:这里echarts没有采用按需引入的方式,只是为了方便学习 */ import echarts from 'echarts' const install = function(Vue) { Object.defineProperties(Vue.prototype, { $chart: { get() { return { //画一条简单的线 line1: function (id) { this.chart = echarts.init(document.getElementById(id)); this.chart.clear(); const optionData = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] }; this.chart.setOption(optionData); }, } } } }) } export default { install } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-comment">/** * 各种画echarts图表的方法都封装在这里 * 注意:这里echarts没有采用按需引入的方式,只是为了方便学习 */</span> <span class="hljs-keyword">import</span> echarts <span class="hljs-keyword">from</span> <span class="hljs-string">'echarts'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> install = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">Vue</span>) </span>{ <span class="hljs-built_in">Object</span>.define<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>erties(Vue.prototype, { <span class="hljs-attr">$chart</span>: { get() { <span class="hljs-keyword">return</span> { <span class="hljs-comment">//画一条简单的线</span> line1: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">id</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.chart = echarts.init(<span class="hljs-built_in">document</span>.getElementById(id)); <span class="hljs-keyword">this</span>.chart.clear(); <span class="hljs-keyword">const</span> optionData = { <span class="hljs-attr">xAxis</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'category'</span>, <span class="hljs-attr">data</span>: [<span class="hljs-string">'Mon'</span>, <span class="hljs-string">'Tue'</span>, <span class="hljs-string">'Wed'</span>, <span class="hljs-string">'Thu'</span>, <span class="hljs-string">'Fri'</span>, <span class="hljs-string">'Sat'</span>, <span class="hljs-string">'Sun'</span>] }, <span class="hljs-attr">yAxis</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'value'</span> }, <span class="hljs-attr">series</span>: [{ <span class="hljs-attr">data</span>: [<span class="hljs-number">820</span>, <span class="hljs-number">932</span>, <span class="hljs-number">901</span>, <span class="hljs-number">934</span>, <span class="hljs-number">1290</span>, <span class="hljs-number">1330</span>, <span class="hljs-number">1320</span>], <span class="hljs-attr">type</span>: <span class="hljs-string">'line'</span>, <span class="hljs-attr">smooth</span>: <span class="hljs-literal">true</span> }] }; <span class="hljs-keyword">this</span>.chart.setOption(optionData); }, } } } }) } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { install } </code></pre> <p>HelloWorld.vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;hello&quot;> <div id=&quot;chart1&quot;></div> </p></div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'HelloWorld', data () { return { } }, mounted() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$chart.line1('chart1'); } } </script></p> <style scoped> #chart1 { width: 300px; height: 300px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="HTML"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chart1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'HelloWorld'</span>, data () { <span class="hljs-keyword">return</span> { } }, mounted() { <span class="hljs-keyword">this</span>.$chart.line1(<span class="hljs-string">'chart1'</span>); } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-id">#chart1</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVbc22p?w=320&amp;h=480" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h1 id="articleHeader6">方式二、使用<a href="https://github.com/Justineo/vue-echarts" rel="nofollow noreferrer" target="_blank">vue-echarts</a><br /> </h1> <h3 id="articleHeader7">先npm安装vue-echarts</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-echarts --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="Shell" style="word-break: break-word; white-space: initial;">npm install vue-echarts --save</code></pre> <h3 id="articleHeader8">开发:</h3> <p>除了全量引用echarts,我们还可以采用按需引入的方式</p> <p>main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import ECharts from 'vue-echarts/components/ECharts' import 'echarts/lib/chart/line' Vue.component('chart', ECharts)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-keyword">import</span> ECharts <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-echarts/components/ECharts'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'echarts/lib/chart/line'</span> Vue.component(<span class="hljs-string">'chart'</span>, ECharts)</code></pre> <p>HelloWorld.vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;hello&quot;> <chart ref=&quot;chart1&quot; :options=&quot;orgOptions&quot; :auto-resize=&quot;true&quot;></chart> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'HelloWorld', data () { return { orgOptions: {}, } }, mounted() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.orgOptions = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="HTML"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">chart</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"chart1"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"orgOptions"</span> <span class="hljs-attr">:auto-resize</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">chart</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'HelloWorld'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">orgOptions</span>: {}, } }, mounted() { <span class="hljs-keyword">this</span>.orgOptions = { <span class="hljs-attr">xAxis</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'category'</span>, <span class="hljs-attr">data</span>: [<span class="hljs-string">'Mon'</span>, <span class="hljs-string">'Tue'</span>, <span class="hljs-string">'Wed'</span>, <span class="hljs-string">'Thu'</span>, <span class="hljs-string">'Fri'</span>, <span class="hljs-string">'Sat'</span>, <span class="hljs-string">'Sun'</span>] }, <span class="hljs-attr">yAxis</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'value'</span> }, <span class="hljs-attr">series</span>: [{ <span class="hljs-attr">data</span>: [<span class="hljs-number">820</span>, <span class="hljs-number">932</span>, <span class="hljs-number">901</span>, <span class="hljs-number">934</span>, <span class="hljs-number">1290</span>, <span class="hljs-number">1330</span>, <span class="hljs-number">1320</span>], <span class="hljs-attr">type</span>: <span class="hljs-string">'line'</span>, <span class="hljs-attr">smooth</span>: <span class="hljs-literal">true</span> }] } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>ps:原本webpack配置需要改的,看了一下vue-echarts的官网说明是v2.3.4之后都不需要改了,所以到这里就结束了。试过打包了,没报错~</p> <h1 id="articleHeader9">选择</h1> <p>两种方式都能实现大部分需求。</p> <p>个人认为:</p> <ul> <li>如果你的需求是定制化比较少的,基本上绑定数据然后展示就行了,或者你对echarts还不是很熟悉的,那么vue-chart是一个不错的选择;</li> <li>如果你的需求是定制化多的,比如需要特殊处理鼠标事件什么的(当然vue-chart也可以,但我不喜欢同时看两份<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>,多累呀),又或者你已经对echarts比较熟悉了(那你就不会看这篇文章了哈哈),你会发现Echarts官方文档写得真是清晰明了,直接用着也很爽呀完全没问题呀,那么我会更倾向于直接使用echarts。</li> </ul> <p>我刚开始一两个项目的时候用vue-chart很舒服,上手很快,但后面做得多了,我觉得还是直接写更能满足我,Anyway,看个人选择吧!</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

在Vue中使用echarts的两种方式

全部内容,希望文章能够帮你解决

在Vue中使用echarts的两种方式

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过