기사 디렉토리
머리말
提示：这里可以添加本文要记录的大概内容：
이 기사는 주로 ECharts의 과거와 현재, 프로젝트에서 ECharts를 사용하는 프로세스 단계 및 ECharts의 몇 가지 일반적인 구성을 공유합니다.
提示：以下是本篇文章正文内容，下面案例可供参考
1. ECharts 소개
공통 데이터베이스:
- D3.js는 현재 웹에서 가장 높은 평가를 받는 Javascript 시각화 도구 라이브러리입니다(시작하기 어려움).
- ECarts.js Baidu에서 제작한 오픈 소스 Javascript 데이터 시각화 라이브러리(중국산)
- Highcharts.js 많은 외국 대기업에서 사용하는 비상업적이고 무료인 외국 프런트 엔드 데이터 시각화 라이브러리
- AntV Ant Financial의 차세대 데이터 시각화 솔루션 등
따라서 ECharts는 Baidu에서 제작한 오픈 소스 Javascript 데이터 시각화 라이브러리입니다.Highcharts는 해외에서 더 많이 사용되고 Echarts는 중국에서 더 많이 사용됩니다.둘 사이의 관계는 WPS와 Office와 비슷합니다. PC 및 모바일 장치에서 원활하게 실행될 수 있으며 최신 브라우저(IE8/9/10/11, Chrome, Firefox, Safari 등 ) 와 호환됩니다 . 고도로 맞춤화된 데이터 시각화 차트.
2. ECharts 사용 시 프로세스 단계
1. echarts를 다운로드하여 페이지로 가져옵니다.
- 전자 차트 다운로드
- 프로젝트 구성 요소에 도입
import echarts from 'echarts';
2. div 상자 준비
<div id="main" style="width: 600px;height:400px;"></div> //方法一对应的盒子
<div class="content-460300" ref="unlockTrendRef"></div> //方法二对应的盒子
3. echarts 인스턴스 개체 초기화
var myChart = echarts.init(document.getElementById('main')); //方法一对应的初始化
let unlockTrendChart = echarts.init(this.$refs.unlockTrendRef); //方法二对应的初始化
4. 구성 항목 및 데이터 지정(옵션)
var option = {
//方法一对应的配置
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'
}]
};
var option = {
//方法二对应的配置
title: {
text: '最近一个月开锁方式折线图(人)',
left: 0,
top: 0,
textStyle: {
fontSize: 12,
color: 'rgba(192, 216, 255, 1)'
}
},
grid: {
//图表和父盒子之间的距离
left: '40px',
right: '40px',
bottom: '20px',
top: '20%',
containLabel: true
},
legend: {
data: ['指纹开锁', '门卡开锁', '密码开锁'],
textStyle: {
color: '#c0d8ff'
}
},
xAxis: {
data: unlockTrendXKey,
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 0,
rotate: 0,
color: '#DFDDEA',
fontFamily: 'PingFang SC',
textStyle: {
color: '#C0D8FF', //文字的颜色
fontSize: '12'
}
},
axisLine: {
lineStyle: {
color: '#5897ff',
width: 1,
type: 'solid'
}
}
},
yAxis: {
type: 'value',
//Y轴的坐标文字
minInterval: 1, //y坐标轴最小间隔大小
axisLabel: {
show: true,
textStyle: {
color: '#C0D8FF' //文字的颜色
},
fontSize: 10,
fontFamily: 'PingFang SC'
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#5897ff']
}
},
axisLine: {
show: false
},
axisTick: {
//y坐标轴刻度线设置
show: false
}
},
tooltip: {
trigger: 'axis'
},
series: [
{
name: '指纹开锁',
type: 'line',
stack: 'Total',
data: fingerVal
},
{
name: '门卡开锁',
type: 'line',
stack: 'Total',
data: cardVal
},
{
name: '密码开锁',
type: 'line',
stack: 'Total',
data: codeVal
}
]
};
5. 구성 항목을 echarts 인스턴스 개체로 설정합니다.
myChart.setOption(option); //方法一对应的设置
unlockTrendChart.setOption(option); //方法二对应的设置
결과 보여줘
- 방법 2의 해당 효과
세 가지, 일반적으로 사용되는 구성
이해해야 할 주요 구성:
seriesxAxisyAxisgridtooltiptitlelegendcolor
- 시리즈
시리즈 목록. 각 시리즈는 다음을 통해type자체 차트 유형을 결정합니다. - xAxis
직교 좌표계 그리드의 x축 - yAxis
직교 좌표계 그리드의 y축 - 그리드
데카르트 좌표계 그리기 그리드. - 도구 설명
프롬프트 상자 구성 요소 - 제목
제목 구성 요소 - 범례
범례 구성 요소 - 색상
팔레트 색상 목록
요약하다
echarts 사용의 핵심은 다음과 같습니다.
- div 상자 준비
- 인스턴스 객체 echarts.init(div box) 초기화
- 구성 항목 및 데이터 지정
- 사물을 인스턴스화하기 위해 구성 항목을 제공하십시오. myChart.setOption(option)
공유가 여기에 있습니다. 도움이 된다면 좋아요를 누르 거나 질문이 있으면 함께 토론할 메시지를 남겨주세요 . 함께 성장합시다! ! !