此次后臺使用的語言是PHP，遇到的問題就是后臺的數(shù)組傳遞到前臺刽漂，前臺頁面控制臺輸出的是Arra{native code}僻焚；所以前臺取不到值一罩，所以我們用json_encode下轉(zhuǎn)換一下在傳到前臺就好了面哥。
開場白：害怕你性子急，所以echart官方配置項手冊直接去參考開發(fā)隙弛。
第一步饱溢，js文件引入喧伞，下載地址請點擊！
<script src="../echarts.js"></script>? ps：前面的“..”代表你放置的路徑
第二步绩郎，初始化echarts實例
初始化的前提是在html頁面內(nèi)先有echarts展示的位置潘鲫，在進行展示（個人習(xí)慣）。
html 代碼：
? ?<div id="chart" style=""></div>
js 代碼初始化實例：var myChart =echarts.init(document.getElementById('chart'));
第三步肋杖，該部分的核心內(nèi)容配置option
（1）title屬性：見字知意溉仑，就是配置你所需的主題（通常就是你圖形的標題了，如果有特殊的處理可以詳細參考title屬性配置状植。
eg：title{ text：‘某某數(shù)據(jù)圖’}浊竟，怨喘，這里打兩個逗號是為了區(qū)分在配置option時，你不會只配置title振定，所以各個配置項之間用大括號進行分割必怜。
（2）tooltip：{trigger：‘a(chǎn)xis’}這個屬性就是提示框組件了，可以用也可以不使用后频，其中trigger的觸發(fā)機制還有兩個分別是“item”和“none”梳庆。不做贅述
（3）legend 配置項。 這個當然也是可以沒有的徘郭，但是它主要展示的是在你的坐標軸包含多種種類的數(shù)據(jù)對比時靠益，它就能幫到你了。
eg：legend: {
type:'scroll',? ? ? ? ? ? ? ? ? ? ?// 這個type默認是不滾動的残揉，當然你的data很多的時候胧后，它的作用就起到了
? ? show:true,? ? ? ? ? ? ? ? ? //見字知意
? ? padding:[0,50,0,150], //可有可無，如果你覺得它顯示的位置你不喜歡的話抱环，可以進行微調(diào)哦壳快，如果想要改變展示的位置就要用到top，bottom镇草，left和right等屬性了眶痰，不做贅述。
? ? data:['A','B','C'], //你需要展示的數(shù)據(jù)值梯啤，當然也可以獲取后臺傳來的值竖伯，遇到取不到看我的頂部內(nèi)容哦！
? ? selected:{? ? ?//可以選擇你想讓你的數(shù)據(jù)哪些在起初不進行展示因宇，例子如旁
? ? ? ? 'A':false
? ? }
}
（4）series 屬性∑哂ぃ現(xiàn)在就說這個是與上面的legend有關(guān)哦。這里展示的數(shù)據(jù)數(shù)據(jù)項要與legend要對應(yīng)哦察滑，不然legend的數(shù)據(jù)展示會出現(xiàn)異常打厘。而且你的圖形走勢與series有關(guān)。
eg：series: [
{
? ? ? ?name:'A',
? ? ? ? data:[]? ? //這個數(shù)據(jù)值與x軸的內(nèi)容相關(guān)贺辰，可以說是一一對應(yīng)的户盯，x軸有幾個這里就有幾個數(shù)據(jù)值，否則圖形不會展示饲化，控制臺會提示錯誤哦莽鸭！
? ? ? ? type:'bar',? // 這個是要展示的是柱狀圖還是折線還是什么。但是如果是扇形的話就不能是坐標軸了額吃靠，需要重新開始配置蒋川，這里不做贅述。
? ? },
]
當然series你可以用循環(huán)輸出哦撩笆，后面會附我的例子捺球！
（5）color 可以設(shè)置顯示的顏色缸浦，隨機的！
（6）grid 配置整個圖形的展示大小氮兵。在grid也可以配置多個坐標軸哦裂逐，小伙伴自己發(fā)掘一下哦，這里不做太多闡述泣栈。
eg：
grid: {
left:'2%',
? ? right:'5%',
? ? bottom:'3%',
? ? containLabel:true
}
（7）xAxis：橫坐標軸卜高，在一個矩形坐標軸內(nèi)可以有兩個上或者下，具體的配置就是用"[]"進行包含南片，這也就是為什么series外層用的是【】而不是{}掺涛。其中x軸配置項中除了data和type屬性很簡單外，這里重點說另外兩個疼进，一個是boundaryGap屬性薪缆，它有兩個值true和false，true就是x軸不會從坐標原點開始伞广，相反false會從原點開始拣帽。axisLabel屬性這個是控制x軸文字內(nèi)容顯示的，通過interval和rotate來處理x軸顯示內(nèi)容過多時嚼锄，為了不重疊减拭。
（8）yAxis:同x軸不做贅述。
（9）強調(diào)一點吧区丑，如果你使用雙x軸或者雙y軸的情況下拧粪，一定要在series里使用一個屬性，那就是yAxisIndex：1 這里是數(shù)組的下標值沧侥，以雙y軸為例可霎。
第四步 將配置加入到echart中
myChart.setOption(option);
到此一個圖形的展示就完成了。我在使用時的配置項內(nèi)容：
var myChart =echarts.init(document.getElementById('chart'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text:'報表數(shù)據(jù)圖'
? ? },
? ? tooltip: {
trigger:'axis'
? ? },
? ? legend: {
type:'scroll',
? ? ? ? show:true,
? ? ? ? padding:[0,50,0,150],
? ? ? ? data:{$graphStr},
? ? ? ? selected:{
'申請UV':false
? ? ? ? }
},
? ? color: [
'#FF3333',
? ? ? ? '#53FF53',
? ? ? ? '#B15BFF',
? ? ? ? '#68CFE8',
? ? ? ? '#FFDC35',
? ? ? ? '#5fb8df',
? ? ? ? '#ff3fa4',
? ? ? ? '#19ff1a',
? ? ? ? '#1507ff',
? ? ? ? '#8280ff',
? ? ? ? '#f3ff86',
? ? ],
? ? grid: {
left:'2%',
? ? ? ? right:'5%',
? ? ? ? bottom:'3%',
? ? ? ? containLabel:true
? ? },
? ? toolbox: {
feature: {
saveAsImage:{}
}
},
? ? xAxis: {
type:'category',
? ? ? ? boundaryGap:true,
? ? ? ? data:{$arrGData}['data_time'],
? ? ? ? axisLabel:{
interval:0,
? ? ? ? ? ? rotate:{$arrGData}['data_time'].length >5 ? -90 :0
? ? ? ? }
},
? ? yAxis: [
{
type:'value',
? ? ? ? ? ? name:'整數(shù)',
? ? ? ? ? ? position:'left'
? ? ? ? },
? ? ? ? {
type:'value',
? ? ? ? ? ? name:'百分比/%',
? ? ? ? ? ? position:'right'
? ? ? ? }
],
? ? series: [
{foreach $graphNumber as $key=>$item}
{
name:'{$key}',
? ? ? ? ? ? data:{$arrGData}['{$item}'],
? ? ? ? ? ? type:'bar',
? ? ? ? ? ? barWidth:0
? ? ? ? },
? ? ? ? {/foreach}
{foreach $graphPercent as $key=>$item}
{
name:'{$key}',
? ? ? ? ? ? data:{$arrGData}['{$item}'],
? ? ? ? ? ? type:'line',
? ? ? ? ? ? yAxisIndex:1
? ? ? ? },
? ? ? ? {/foreach}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表正什。
myChart.setOption(option);
實例圖如下：
好了啥纸，分享就到這里了号杏，望各位多多指教婴氮！
