① 怎么设置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 配置项