① 怎麼設置jscharts x軸和y軸的數據字體大小
項目中需要FusionCharts圖表顯示雙Y軸，好像FCF_MSLine.swf不可以這樣，只能顯示一個Y軸，多條線, 找了一下，用MSCombiDY2D.swf可以實現，生成圖如下： 兩個圖表的數據是一樣的，設置有一此不同而己 對應的XML文本如下： 復制代碼 代碼如下: <chart palette='2' caption='圖表' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecision='1' PYAxisName='價格' SYAxisName='數量' numberPrefix='$' formatNumberScale='0'> <categories> <category label='20121110' /> <category label='20121111' /> <category label='20121112' /> <category label='20121113' /> <category label='20121114' /> <category label='20121115' /> <category label='20121116' /> </categories> <dataset renderAs='Line' parentYAxis='P' seriesName='Profit'> <set value='3242' /> <set value='3171' /> <set value='700' /> <set value='1287' /> <set value='1856' /> <set value='987' /> <set value='1610' /> </dataset> <dataset lineThickness='1' parentYAxis='S' seriesName='數量' > <set value='174' /> <set value='197' /> <set value='155' /> <set value='15' /> <set value='66' /> <set value='85' /> <set value='37' /> </dataset> </chart> 現在要將區域圖表變為曲線只需將 <dataset renderAs='Area' parentYAxis='P' seriesName='Profit'> 改為 <dataset renderAs='Line' parentYAxis='P' seriesName='Profit'> 說明： parentYAxis='P'表示對應的為左邊的Y軸 parentYAxis='S'表示對應的為右邊的Y軸 renderAs表示形狀，Area 為區域圖表，Line為曲線圖表 關於 參數設置 功能特性 animation 是否動畫顯示數據，默認為1(True) showNames 是否顯示橫向坐標軸(x軸)標簽名稱 rotateNames 是否旋轉顯示標簽，默認為0(False):橫向顯示 showValues 是否在圖表顯示對應的數據值，默認為1(True) yAxisMinValue 指定縱軸(y軸)最小值，數字 yAxisMaxValue 指定縱軸(y軸)最小值，數字 showLimits 是否顯示圖表限值(y軸最大、最小值)，默認為1(True) 圖表標題和軸名稱 caption 圖表主標題 subCaption 圖表副標題 xAxisName 橫向坐標軸(x軸)名稱 yAxisName 縱向坐標軸(y軸)名稱 圖表和畫布的樣式 bgColor 圖表背景色，6位16進制顏色值 canvasBgColor 畫布背景色，6位16進制顏色值 canvasBgAlpha 畫布透明度，[0-100] canvasBorderColor 畫布邊框顏色，6位16進制顏色值 canvasBorderThickness 畫布邊框厚度，[0-100] shadowAlpha 投影透明度，[0-100] showLegend 是否顯示系列名，默認為1(True) 字體屬性 baseFont 圖表字體樣式 baseFontSize 圖表字體大小 baseFontColor 圖表字體顏色，6位16進制顏色值 outCnvBaseFont 圖表畫布以外的字體樣式 outCnvBaseFontSize 圖表畫布以外的字體大小 outCnvBaseFontColor 圖表畫布以外的字體顏色，6位16進制顏色值 分區線和網格 numDivLines 畫布內部水平分區線條數，數字 divLineColor 水平分區線顏色，6位16進制顏色值 divLineThickness 水平分區線厚度，[1-5] divLineAlpha 水平分區線透明度，[0-100] showAlternateHGridColor 是否在橫向網格帶交替的顏色，默認為0(False) alternateHGridColor 橫向網格帶交替的顏色，6位16進制顏色值 alternateHGridAlpha 橫向網格帶的透明度，[0-100] showDivLinues 是否顯示Div行的值，默認？？ numVDivLines 畫布內部垂直分區線條數，數字 vDivLineColor 垂直分區線顏色，6位16進制顏色值 vDivLineThickness 垂直分區線厚度，[1-5] vDivLineAlpha 垂直分區線透明度，[0-100] showAlternateVGridColor 是否在縱向網格帶交替的顏色，默認為0(False) alternateVGridColor 縱向網格帶交替的顏色，6位16進制顏色值 alternateVGridAlpha 縱向網格帶的透明度，[0-100] 數字格式 numberPrefix 增加數字前綴 numberSuffix 增加數字後綴 % 為 '%25' formatNumberScale 是否格式化數字,默認為1(True),自動的給你的數字加上K（千）或M（百萬）；若取0,則不加K或M decimalPrecision 指定小數位的位數，[0-10] 例如：='0' 取整 divLineDecimalPrecision 指定水平分區線的值小數位的位數，[0-10] limitsDecimalPrecision 指定y軸最大、最小值的小數位的位數，[0-10] formatNumber 逗號來分隔數字(千位，百萬位),默認為1(True)；若取0,則不加分隔符 decimalSeparator 指定小數分隔符,默認為'.' thousandSeparator 指定千分位分隔符,默認為',' Tool-tip/Hover標題 showhovercap 是否顯示懸停說明框，默認為1(True) hoverCapBgColor 懸停說明框背景色，6位16進制顏色值 hoverCapBorderColor 懸停說明框邊框顏色，6位16進制顏色值 hoverCapSepChar 指定懸停說明框內值與值之間分隔符,默認為',' 折線圖的參數 lineThickness 折線的厚度 anchorRadius 折線節點半徑，數字 anchorBgAlpha 折線節點透明度，[0-100] anchorBgColor 折線節點填充顏色，6位16進制顏色值 anchorBorderColor 折線節點邊框顏色，6位16進制顏色值 Set標簽使用的參數 value 數據值 color 顏色 link 鏈接（本窗口打開[Url]，新窗口打開[n-Url]，調用JS函數[JavaScript:函數]） name 橫向坐標軸標簽名稱
② Vue+Echarts 實現自定義折線圖組件
網上Vue結合Echarts使用的例子少之又少，而且數據都寫好在組件內且不可復用
本文基於 Vue.js高仿餓了么外賣App ，在商家頁面添加一個簡易的可交互的平滑折線圖
Chrome調試模擬手機端操作效果：
</br>
我將拆分為兩個部分，標題和三個選擇框寫在當前頁面seller.vue中，將配置折線圖的樣式都寫在父組件seller.vue里，折線圖則抽象化為可復用的組件。
</br>
模擬一份JSON格式的 折線圖xy坐標軸數據 chartData ，其中分了日、周、月這三組數據。
** data.json：**
</br>
在 webpack 的 dev-sever.js 中讀取模擬好的 chartData 數據，然後新增個介面apiRoutes，當服務端收到請求以後，返回給客戶端 chartData
** dev-sever.js：**
</br>
Hello.vue向伺服器請求並獲取 chartData
Hello.vue：
</br>
seller.vue 中寫好標題和三個選擇框的樣式
props 接收從 Hello.vue 傳來的xy坐標軸數據 chartData
傳入 chart.vue 將要接收的數據，impData 為 chartData 中的一組數據，setData 為自定義折線圖樣式的數據。
select(type) 方法是點擊選擇框高亮，並把 impData 賦值為 chartData 中對應的一組數據
** seller.vue ：**
</br>
chart.vue組件中
prop 接收父組件 seller.vue 的傳來的 impChartData 和 setChartData
watch 觀察 impChartData 數據的變化，因為父組件點擊選擇框會改變傳入的數據，這里相應的改變數據，並渲染新的折線圖
drawLine(xData, yData, xAxisColor, lineColor, grid) 是繪制折線圖樣式的主體，我提取出了五個屬性值作為參數，
分別是x坐標軸數據、y坐標軸數據、x坐標軸指示器的顏色、折線線條的顏色、直角坐標系內繪圖網格，
分別獲取自 this.impChartData.xData、 this.impChartData.yData、 this.setChartData.xAxisColor、 this.setChartData.lineColor、 this.setChartData.grid
Echarts的 配置項 很多，如果想自定義更加個性化的樣式，比如多條折線、兩個x軸坐標，都可以設置為參數。
GitHub 上已經有達人做了幾張圖的基本模板 v-charts ，很方便就是可配置項比較少。
chart.vue：
</br>
參考文檔：
Echarts 配置項