Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie Echarts im Vue-Projekt
So verwenden Sie: 1. Verwenden Sie den Befehl „yarn add echarts“ oder „npm install echarts -S“ oder „cnpm install echarts -S“, um Echarts zu installieren. 2. Verwenden Sie „import echarts from ‚echarts‘ Vue. in main. js.prototyp.$echarts = echarts“ zur Einführung; 3. Rufen Sie einfach die entsprechende API auf der Vue-Seite auf.
Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.
Echarts ist eine reine JavaScript-Symbolbibliothek, die mit den meisten Browsern kompatibel ist. Die unterste Ebene basiert auf der leichten Canvas-Klassenbibliothek ZRender, um eine intuitive, lebendige, interaktive und hochgradig personalisierte Datenvisualisierung zu ermöglichen Diagramme. Innovative Drag-and-Drop-Neuberechnungen, Datenansichten, Wertebereichs-Roaming und andere Funktionen verbessern das Benutzererlebnis erheblich und geben Benutzern die Möglichkeit, Daten zu extrahieren und zu integrieren.
Echarts ist eine Framework-unabhängige JS-Diagrammbibliothek, die jedoch auf Js basiert, sodass viele Frameworks sie verwenden können, wie z. B. Vue.
4.8.0
// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S
Weltweit eingeführtyarn
, 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 |
in main.js |
let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };
EChart als Container (die Verwendung der ID führt zu einer kleinen Frage, die am Ende beantwortet wird)🎜<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">🎜🎜🎜🎜Erstellen Sie eine Methode🎜🎜🎜🎜🎜<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">🎜🎜🎜 🎜Rufen Sie diese Methode während des Lebenszyklus auf🎜🎜🎜🎜🎜<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>🎜🎜🎜Bitte schauen Sie auf den großen Bildschirm🎜🎜🎜<figure><img src="https:/%20/img.php.cn/upload/image/958/830/870%20/167394793616534So%20verwenden%20Sie%20Echarts%20im%20Vue-Projekt" title="167394793616534So verwenden Sie Echarts im Vue-Projekt" alt="So verwenden Sie Echarts im Vue-Projekt"></figure>🎜 Menschen, die Melonen essen: „Ist nicht“ Ist das kein offizielles Beispiel? Können Sie es ein wenig vorführen?“ Lehrer Yan: „Um ehrlich zu sein, ist es etwas niedrig, keine Panik, fangen wir zuerst mit der Grundvorlesung an.“ "heading-11">🎜🎜🎜🎜Verstehen Sie zunächst die Parameter🎜🎜🎜🎜🎜🎜 Lassen Sie uns über einige einfache Konfigurationsparameter sprechen, die langweilig sind, aber nachdem Sie sie berührt haben, ist das Zeichnungsbild ein glattes Bild. /code>address)🎜</h3>
</h3>
<table>
<thead><tr class="firstRow">
<th>Parametername</th>
<th>Funktion</th>
<th>Bemerkungen</th>🎜</tr></thead> <tbody>
<tr>🎜<code>title
🎜🎜 als Diagrammname🎜🎜https://echarts.apache.org/zh/option.html#title🎜🎜
legend 🎜🎜Als Markierung für ein Diagramm🎜🎜https://echarts.apache.org/zh/option.html#legend🎜🎜<tr>🎜<code>xAxis
🎜🎜Als X -Achse für ein Diagramm🎜 🎜https://echarts.apache.org/zh/option.html#xAxis🎜🎜yAxis
🎜🎜Als Y-Achse des Diagramms🎜🎜 https://echarts.apache.org /zh/option.html#yAxis🎜🎜series
🎜🎜Serien als Diagramm🎜🎜https://echarts.apache.org/zh /option.html#series🎜🎜🎜color
🎜🎜als Farbliste für Diagramme🎜🎜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视频教程
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Echarts im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!