零基礎ECharts 圖表使用步驟流程圖詳解與 pc 端自適應

時間 2019-12-12

原文原文鏈接

前言：呦呦呦是我我來了我是靜靜，這回又是零基礎 echarts 圖表的使用，最近項目中要用到echarts 使用，實話是在使用中，一共就三個步驟，看完開發文檔穩妥當當的就會使用，可是你們懶啊因此這個重擔交給我吧。外面市面上的又都是不全的。我今天就來所有整合和使用一下吧你們跟我來javascript

echarts 是什麼

是一個原生js 集合 canvas 進行的繪畫出來的圖標，用來展現數據。到如今是4.0的今天了html

正課開始

準備工具：咱們這裏開發工具sublime 和在官網下載的 echarts 包vue

一、echarts.baidu.com/tutorial.ht… 去找個連接裏面下載 echarts 包和使用vue的同窗 npm 下載的方法java

讓咱們先嚐試圖表展現在頁面上

<head>
	<meta charset="UTF-8">
	<title>echarts</title>
	 <!--  第一步驟 引入 ECharts 文件 -->
	<script type="text/javascript" src="echarts/echarts.js"></script>
</head>
<body>
	<!--  
		第二步驟  設置一個容器DOM 能夠用來存放 echarts 
		 找個容器寬600 高 400
	 -->
	 <div id="main" style="width: 600px;height: 400px;"></div>
</body>
	<script type="text/javascript">
		/*
			第三步 基於準備好的dom，初始化echarts實例 
			這裏記住 echarts 使用的是 init  聯合起來就是  echarts.init
			在 echarts.int() 方法裏面 獲取到 DOM 的 id 這裏跟你講奧 
			id，class 均可以的 大家不用試驗了 餵給你們吃
		*/
		var myChar = echarts.init(document.querySelector('#main'));
		/*
			第四步 指定圖標配置項和數據 
			這裏呢就是咱們要展現在頁面中的內容部分就是至關於人你讓他長啥樣
			這裏語法都是固定好的 var option 是 使用 option 選項
		*/

		var option = {
			 title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
		}

		/*	
			這裏第五步 使用配置項和數據顯示圖表。

			mychar 是咱們把初始化 獲取到的 DOM 賦給的值。
			而後使用 setOption 這裏注意Option 駝峯命名法 O 大寫 是o 不是零 
			而後把咱們 選項的圖片 option 給 setOption 頁面就顯示了
		*/
		myChar.setOption(option);
	</script>
</html>
複製代碼

下面是圖片實例讓咱們繼續往下講，是否是都好奇option 裏面都是什麼爲何會這麼神奇ajax

詳講餅圖裏面各個功能

一、data:    二、itemStyle 
複製代碼

解釋：由於只有 option 部分代碼不同爲了能展現開因此只放 option 部分圖片npm

/* 
    這裏data屬性值 包含 name 和 value 屬性的對象 
	 value：的數值是所佔內容的份額 
	 name: 是所佔份額的名字
 */ 
 /*
 itemStyle 
    通用的樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等
    使用itemStyle來設置
*/ 
複製代碼

全局使用一、 backgroundColor 二、 textStyle:

背景色全局的，因此直接在 option 下設置 backgroundColor
		 backgroundColor: '#B0C4DE',	
 
 文本的樣式能夠設置全局的 textStyle。
		 textStyle:{
		 	color:'#4B0082',
		 	fontSize:25
		 },	
複製代碼

給餅圖分支設置樣式

// 給 餅圖外面的分支文字設置顏色
   	label:{
 		textStyle:{
 			color:'#0000CD'
 		}
 	},
 	
// 給 餅圖分出來的枝丫設置 顏色
	labelLine:{
		lineStyle:{
			color:'black'
		}
	},	
複製代碼

給單獨的餅圖設置樣式 Data 數據

調整格式你們懂得，因此更換了vscode了

高亮提示與高亮提示文字

異步數據獲取圖標

// 模擬異步加載數據
    function echarData(yb){
        setTimeout(function(){
            yb({
                categories: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
                data:[5, 20, 36, 10, 10, 20]
               
            })
        },1000)
    };
    
這裏模擬異步 加載中yb 形參中 categories 和  data 數據相對象 
複製代碼

這裏很重要一點就是後臺傳給前臺的數據在echarts 中設置必須同樣在setOption 中

// 這裏你們都能看懂 是使用了聲明函數，在形參中調用一個函數，把函數傳入形參
    echarData(function(data){
        console.log(data) //這裏data 拿到的就是 異步加載yb裏面的數據
        // 而後在 myChar.setOption 中 給咱們所須要的數據進行動態渲染
        // 這裏很重要一點就是 後臺傳給前臺的數據 在echarts 中吧 必須格式同樣
        myChar.setOption({
            xAxis:{
                data:data.categories
            },
            series:[{
                name:'咱們要記住更改這裏下面也須要更改',
                data:data.data
            }]
        })
    })
複製代碼

loading 動畫當圖片首次加載的時候沒有顯示出來時候使用用於優化

咱們在使用ajax 加載的時候會遇到網絡問題加載過於緩慢等這時候echarts 給咱們想出了辦法看代碼哈canvas

myChar.showLoading(); 前面的 myChar 到時候換成大家本身聲明的方法這個是開啓加載

XXXX.hideLoading(); 關閉加載網絡

全部數據的更新都經過 setOption實現因此很重要

給圖表添加事件

PC端圖表自適應

這裏記住要給存放echarts 表DOM 容器使用的是百分比進行存放而後使用下面紅框中的 js window窗口.添加就可使echarts 大小自適應了由於監控了窗口

監控窗口 大小 隨着變化而變化 
     window.addEventListener("resize", function () {
        myChart.resize();
    });複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

零基礎ECharts 圖表 使用 步驟 流程圖 詳解 與 pc 端自適應

echarts 是什麼

正課 開始

讓咱們 先嚐試 圖表展現 在頁面上

詳講 餅圖 裏面各個 功能

給 餅圖分支 設置樣式