Maison >interface Web >Questions et réponses frontales >Comment utiliser les echarts dans le projet Vue
Comment utiliser : 1. Utilisez la commande "yarn add echarts" ou "npm install echarts -S" ou "cnpm install echarts -S" pour installer Echarts ; 2. Utilisez "import echarts from 'echarts' Vue. dans main. js. prototype.$echarts = echarts" pour introduire ; 3. Appelez simplement l'API appropriée dans la page vue.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
Echarts est un graphique de données de qualité commerciale. Il s'agit d'une bibliothèque d'icônes JavaScript pure, compatible avec la plupart des navigateurs. La couche inférieure s'appuie sur la bibliothèque de classes de canevas légère ZRender pour fournir une visualisation des données intuitive, vive, interactive et hautement personnalisée. graphiques. Le recalcul innovant par glisser-déposer, les vues de données, l'itinérance de la plage de valeurs et d'autres fonctionnalités améliorent considérablement l'expérience utilisateur et donnent aux utilisateurs la possibilité d'exploiter et d'intégrer des données.
Echarts, c'est une bibliothèque de graphiques JS indépendante du framework, mais elle est basée sur Js afin que de nombreux frameworks puissent l'utiliser, comme Vue.
4.8.0
// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S
Introduit globalementyarn
, echarts
版本号是 4.8.0
import echarts from 'echarts' Vue.prototype.$echarts = echarts
在main.js中
<template> <div class="home"> </div> </template> <script> export default { name: 'Home', } </script>
到了这一步说明你已经把准备工作做完了
我们先把页面其他不需要用到的代码给清除吧
<div id="EChart" style="width: 300px; height: 300px;"></div>
创建一个 id 为EChart
的div 作为容器 (使用id会有个小问题,在最后解答)
getRenderer() { console.log(this.$echarts); // 基于准备好的dom,初始化echarts实例 let EChart = this.$echarts.init(document.getElementById("EChart")); // 配置参数 let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }; // 设置参数 EChart.setOption(config); },
mounted() { // 在生命周期中调用 getRenderer 方法 this.getRenderer(); },
let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], };
请看大屏幕
吃瓜群众:“这特么不是官方示例么?能不能炫一点”
严老师:“说实话确实有点low ,不要慌这才哪到哪呢,我们先从基础讲堂开始嘛”
先讲讲其中简单的一些配置参数,枯燥乏味,但是摸清楚之后,以后画图那是顺手得一**
先整点简单、常用的来看看(备注里面皆是对应API
地址)
参数名 | 作用 | 备注 |
---|---|---|
title |
作为图表名称 | https://echarts.apache.org/zh/option.html#title |
legend |
作为图表的标记 | https://echarts.apache.org/zh/option.html#legend |
xAxis |
作为图表的X轴 | https://echarts.apache.org/zh/option.html#xAxis |
yAxis |
作为图表的Y轴 | https://echarts.apache.org/zh/option.html#yAxis |
series |
作为图表的系列 | https://echarts.apache.org/zh/option.html#series |
color |
dans main.js |
let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };
EChart en tant que conteneur (l'utilisation de l'identifiant provoquera une petite question, répondue à la fin)🎜<pre class="brush:js;toolbar:false;">let config = {
series: [
{
name: "销量",
type: "funnel",
data: [
{value: 60, name: &#39;访问&#39;},
{value: 40, name: &#39;咨询&#39;},
{value: 20, name: &#39;订单&#39;},
{value: 80, name: &#39;点击&#39;},
{value: 100, name: &#39;展现&#39;}
]
},
],
};</pre><h3 data-id="heading-8">🎜🎜🎜🎜Créer une méthode🎜🎜🎜🎜🎜<pre class="brush:js;toolbar:false;">[&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;, &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;]</pre><h3 data-id="heading-9">🎜🎜🎜 🎜Appelez cette méthode pendant le cycle de vie🎜🎜🎜🎜🎜<pre class="brush:js;toolbar:false;">let config = {
color:["red","blue","yellow"],
legend:{
data : ["严","老","湿"]
},
series: [
{
name: "销量",
type: "pie",
data: [
{value:20,name:"严"},
{value:10,name:"老"},
{value:15,name:"湿"}
],
},
],
};</pre>🎜🎜🎜Veuillez regarder le grand écran🎜🎜🎜<figure><img src="https:/%20/img.php.cn/upload/image/958/830/870%20/167394793616534Comment%20utiliser%20les%20echarts%20dans%20le%20projet%20Vue" title="167394793616534Comment utiliser les echarts dans le projet Vue" alt="Comment utiliser les echarts dans le projet Vue"></figure>🎜 Les gens qui mangent des melons : "Est-ce que Est-ce un exemple officiel ? Pouvez-vous le montrer un peu ? » Professeur Yan : « Pour être honnête, c'est un peu bas, pas de panique, commençons par le cours de base. »🎜<h3 data-id="heading-11">🎜🎜🎜🎜Comprenez d'abord ses paramètres🎜🎜🎜🎜🎜🎜 Parlons de quelques paramètres de configuration simples, ennuyeux, mais après l'avoir touché, l'image du dessin est fluide. /code>adresse)🎜</h3>
</h3>
</h3>
<table>
<thead><tr class="firstRow">
<th>Nom du paramètre</th>
<th>Fonction</th>
<th>Remarques</th>🎜</tr></thead> <tbody>
<tr>🎜<code>title
🎜🎜 comme nom du graphique🎜🎜https://echarts.apache.org/zh/option.html#title🎜🎜
legend 🎜🎜Comme marqueur pour un graphique🎜🎜https://echarts.apache.org/zh/option.html#legend🎜🎜<tr>🎜<code>xAxis
🎜🎜Comme X -axe pour un graphique🎜 🎜https://echarts.apache.org/zh/option.html#xAxis🎜🎜yAxis
🎜🎜Comme l'axe Y du graphique🎜🎜 https://echarts.apache.org /zh/option.html#yAxis🎜🎜series
🎜🎜Série sous forme de graphique🎜🎜https://echarts.apache.org/zh /option.html#series🎜🎜🎜color
🎜🎜comme liste de couleurs pour les graphiques🎜🎜https://echarts.apache.org/zh/option.html#color🎜🎜🎜 🎜掰扯了这么多,估计大家心里也没个底,实战一下吧
来吧!!展示
修改折线图,复制上面的config
代码
只用修改一处地方,那就是series
中的type
属性为line
即可
let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], };
饼状图,我们也来看看,将type
修改为pie
当然我们需要把多余的X轴Y轴
配置删除咯,data数据格式也需要修改一下
let config = { tooltip: {}, legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };
仪表盘将 type
修改为 gauge
let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };
嗯~ 看起来有那么一点味道了
let config = { series: [ { name: "销量", type: "funnel", data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] }, ], };
哈哈哈 倒三角就是老严的脸了 (脑补一下下)
刚刚其实我们已经用到了这个参数噢 ps:饼状图
legend
可以作为图表的标记或颜色的名称描述(专业名词:图例)
它的type有两个参数plain || scroll
默认为plain
当图表内容比较丰富的时候可以使用 scroll
可以带有滚动操作
都说颜色是Web的灵魂所在,每一个人都是画手
官方默认配色 :
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
我们也可以自己修改颜色,规则是按数据对应的index
找color
颜色
例如这样:
let config = { color:["red","blue","yellow"], legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };
我们还是以线条为参考8
先看看基础篇,我们在y轴声明了一个name
let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"销量", type: 'value' }], series: [{ name:'销量', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] };
但是有时候呢,我们会根据需求,要做一个双Y轴,顾名思义双Y轴,在加一个Y轴就好了
let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }
x轴与y轴基本同理,直接改成数组就成为双x轴了
let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] };
到了上面基础篇也就差不多了
其实我们讲了这么多,我们梳理梳理最开始的问题
id重名怎么办?
数据多个渲染怎么办?
答案:使用ref,因为vue是单页面,使用id出现 重名会导致渲染问题
具体怎么使用我们来看看
<div ref="EChart" style="width: 300px; height: 300px;"></div>
// 同样的初始化参数 但是我们此次使用的是ref let EChart = this.$echarts.init(this.$refs.EChart) // 配置参数 let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }; // 设置参数 EChart.setOption(config);
相关推荐:vue.js视频教程
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!