echarts的基本用法——未完待續
阿新 • • 發佈：2018-11-10
一、引入echarts（有問題請留言）
ECharts是由百度打造的一個純javascript的圖示庫，很好用。
下載地址：http://echarts.baidu.com/download.html
可下載精簡版或者完整版
引入js.
<script type="text/javascript" src="echarts-all.js"></script>
二、使用echarts
在使用echarts製圖之前，首先要定義一個div.
<body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <!-- 柱狀圖bar --> <div id="echarts_bar" style="width: 600px;height:400px;"></div> <!-- 柱狀圖line --> <div id="echarts_line" style="width: 600px;height:400px;"></div> <!-- 餅狀圖pie--> <div id="echarts_pie" style="width: 600px;height:400px;"></div> <!-- 地圖map--> <div id="echarts_map" style="width: 600px;height:400px;"></div> </body>
1、柱狀圖
// 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('echarts_bar')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option);
2、折線圖
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('echarts_line'));
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
3、餅狀圖
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('echarts_pie'));
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'pie',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
4、中國地圖
第一步、寫入隨機數來測試資料：
function randomData() {
return Math.round(Math.random()*500);
}
第二部、寫入資料
var mydata = [
{name: '北京',value: '100' },{name: '天津',value: randomData() },
{name: '上海',value: randomData() },{name: '重慶',value: randomData() },
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
{name: '雲南',value: randomData() },{name: '遼寧',value: randomData() },
{name: '黑龍江',value: randomData() },{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },{name: '山東',value: randomData() },
{name: '新疆',value: randomData() },{name: '江蘇',value: randomData() },
{name: '浙江',value: randomData() },{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },{name: '廣西',value: randomData() },
{name: '甘肅',value: randomData() },{name: '山西',value: randomData() },
{name: '內蒙古',value: randomData() },{name: '陝西',value: randomData() },
{name: '吉林',value: randomData() },{name: '福建',value: randomData() },
{name: '貴州',value: randomData() },{name: '廣東',value: randomData() },
{name: '青海',value: randomData() },{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },{name: '寧夏',value: randomData() },
{name: '海南',value: randomData() },{name: '臺灣',value: randomData() },
{name: '香港',value: randomData() },{name: '澳門',value: randomData() }
];
第三步、例項化option，配置屬性，data置入資料
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '全國地圖大資料',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
//左側小導航圖示
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
},
//配置屬性
series: [{
name: '資料',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true //省份名稱
},
emphasis: {
show: false
}
},
data:mydata //資料
}]
};
//初始化echarts例項
var myChart = echarts.init(document.getElementById('echarts_map'));
//使用制定的配置項和資料顯示圖表
myChart.setOption(optionMap);