最近在弄商城的圖表數(shù)據(jù)涛舍，要用到了echart.js暂筝，echart是支持多種圖表的箩言，有折線圖，餅圖焕襟，柱形圖等等陨收，我們項目中主要用到的是餅圖與折線圖，這里就簡單介紹下餅圖與折線圖。
和大多數(shù)的插件一樣务漩，必須要引用他的js拄衰，我們可以從echart官網(wǎng)，或者用npm 獲取 echarts饵骨，npm install echarts --save ?下載所需的js翘悉，這個就不多做介紹，官網(wǎng)上都有居触，
<script src="echarts.min.js"></script>
html中要準備一個具有寬和高額容器镐确，
<div id='content'></div>
在js中寫入繪圖步驟，首先找到這個容器
// 基于準備好的dom饼煞，初始化echarts實例?
var myChart=echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},//鼠標提示
legend: {
data:['銷量']
},
xAxis: {//x軸數(shù)據(jù) data數(shù)據(jù)可為空源葫，可以在請求完接口時，填入數(shù)據(jù)
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},//y軸數(shù)據(jù)
series: [{
name: '銷量',
type: 'category',// 不同的圖表對應不同的type
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表砖瞧。
myChart.setOption(option);
里面一些特定的字段息堂，具有特定的意義，如果想展示不同的效果還要去翻閱echart的官方api ? ? ? ? ? ? http://echarts.baidu.com/api.html#echarts
如果是折線圖块促，需要展示兩條x軸數(shù)據(jù)荣堰，y軸不展示，對應寫法?
xAxis:? [{
type:'category',
boundaryGap:false,
data: [],
axisLine:{
show:false
},
axisTick:{
show:false
}
},//第一條數(shù)據(jù)
{//第二條數(shù)據(jù)
type:'category',
boundaryGap:false,
data: [],
axisLine:{
show:false
},
axisTick:{
show:false
}
}],
yAxis: {
type:'value',
axisLabel: {
formatter:'{value}'
},
splitNumber:0, ?//y軸數(shù)據(jù)間隔竭翠，這個默認好像是5 振坚，所以可以根據(jù)調這個大小，來調y軸數(shù)據(jù)
show:true,//控制y軸是否顯示
min:0,//y軸最小數(shù)據(jù)
max:80,//y軸最大數(shù)據(jù)?
splitLine:{
show:false
}
},
echart非常強大斋扰，里面的功能也需要時間去研究渡八，我這一兩句也說不明白，大家如果用到 就去官網(wǎng)讀代碼吧
