vue 프로젝트에서 echart를 사용하는 방법

사용 방법: 1. "yarn add echarts" 또는 "npm install echarts -S" 또는 "cnpm install echarts -S" 명령을 사용하여 Echarts를 설치합니다. 3. vue 페이지에서 해당 API를 호출하면 됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Echarts는 상용급 데이터 차트로, 대부분의 브라우저와 호환됩니다. 하단 레이어는 경량 캔버스 클래스 라이브러리 ZRender를 사용하여 직관적이고 생생하며 고도로 개인화된 데이터 시각화를 제공합니다. 차트. 혁신적인 드래그 앤 드롭 재계산, 데이터 보기, 값 범위 로밍 및 기타 기능은 사용자 경험을 크게 향상시키고 사용자에게 데이터 마이닝 및 통합 기능을 제공합니다.

Echarts, 프레임워크 독립적인 JS 차트 라이브러리이지만 Js를 기반으로 하므로 Vue 등 많은 프레임워크에서 사용할 수 있습니다.

간단히 시작하고 ECHARTS를 설치하세요다음 설치 방법 중 하나를 선택하세요. 버전 번호는4.8.0

// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S

로그인 후 복사

전역적으로 소개됨yarn，echarts版本号是4.8.0

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

全局引入

在main.js中

到了这一步说明你已经把准备工作做完了

清空多余代码

我们先把页面其他不需要用到的代码给清除吧

创建一个容器

创建一个 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地址）

let config = { tooltip: {}, legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };

let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };

컨테이너 만들기ID가EChart<인 div 만들기 /code>를 컨테이너로 사용(ID를 사용하면 작은 질문이 발생하고 마지막에 답변됨)

let config = { series: [ { name: "销量", type: "funnel", data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] }, ], };

로그인 후 복사

로그인 후 복사

메서드 만들기

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

로그인 후 복사

로그인 후 복사

Life Cycle 동안 이 메소드를 호출하세요

let config = { color:["red","blue","yellow"], legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };

로그인 후 복사

로그인 후 복사

큰 화면으로 봐주세요<그림> 멜론을 먹는 사람들 : "이야 이거 공식적인 예시 아닌가요?" 얀 선생님: "솔직히 말하면 좀 낮으니 당황하지 말고 먼저 기본 강의부터 시작하겠습니다."

먼저 매개변수를 이해하세요 몇 가지 간단한 구성 매개변수에 대해 이야기해 보겠습니다. 지루하지만, 만져보면 그림이 매끄럽게 보입니다. /code>address)제목을 차트 이름으로https://echarts.apache.org/zh/option.html#titlelegend < /code>차트의 마커https://echarts.apache.org/zh/option.html#legendxAxisX로 -차트 축 https://echarts.apache.org/zh/option.html#xAxisyAxis차트의 Y축으로 https://echarts.apache.org /zh/option.html#yAxis시리즈차트로서의 시리즈https://echarts.apache.org/zh /option.html#series< tr>color차트용 색상 목록https://echarts.apache.org/zh/option.html#color

掰扯了这么多，估计大家心里也没个底，实战一下吧

来造作一下下

series type

来吧！！展示

折线图

修改折线图,复制上面的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: '展现'} ] }, ], };

로그인 후 복사

로그인 후 복사

哈哈哈 倒三角就是老严的脸了 （脑补一下下）

legend

刚刚其实我们已经用到了这个参数噢 ps：饼状图

legend可以作为图表的标记或颜色的名称描述(专业名词：图例)

它的type有两个参数plain || scroll

默认为plain当图表内容比较丰富的时候可以使用scroll可以带有滚动操作

color

都说颜色是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:"湿"} ], }, ], };

로그인 후 복사

로그인 후 복사

yAxis

我们还是以线条为参考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', }] }

로그인 후 복사

xAxis

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为问题所在

其实我们讲了这么多，我们梳理梳理最开始的问题

• id重名怎么办？

• 数据多个渲染怎么办？

答案：使用ref，因为vue是单页面，使用id出现 重名会导致渲染问题

具体怎么使用我们来看看

로그인 후 복사

// 同样的初始化参数 但是我们此次使用的是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视频教程

위 내용은 vue 프로젝트에서 echart를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

vue

원천：php.cn

이전 기사：vue의 장점과 단점은 무엇입니까? 왜 그것을 사용합니까? 다음 기사：Vue는 언제 슬롯을 사용해야 합니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• Redis의 센티널에 대해 자세히 이해하기
  2023-04-26 17:59:18
• [정리 및 공유] 인기 있는 React 상태 관리 도구 7가지
  2023-04-26 17:47:48
• 기사에서는 Vue2의 키와 Vue3의 키의 차이점을 설명합니다.
  2023-04-26 17:41:42
• Node의 메모리 제어에 관한 기사
  2023-04-26 17:37:05
• 실용적인 Excel 기술 공유: 중복 값 삭제를 위한 4가지 팁!
  2023-04-26 17:31:25
• 실용적인 단어 기술 공유: 중국어 간체와 번체 변환 기능을 이렇게 사용할 수 있습니다!
  2023-04-26 17:27:32
• 도메인 간 문제를 해결하는 방법은 무엇입니까? 일반적인 솔루션에 대한 간략한 분석
  2023-04-25 19:57:58
• JavaScript의 싱글톤 패턴을 이해하기 위한 기사 1개
  2023-04-25 19:53:11
• 노드의 버퍼에 대해 자세히 알아보기
  2023-04-25 19:49:11
• Vue3에서 단위 테스트를 작성하는 방법 살펴보기
  2023-04-25 19:41:54

최신 이슈

Vue 3 및 Vuetify 3은 구성 요소의 SCSS/SASS 변수에 액세스합니다. Vue3 구성 요소에서 미리 정의된 변수를 사용하고 싶습니다.

매개변수 이름	함수	비고