echarts是一款基于JavaScript的可視化圖表庫,可以用于構建各種復雜的圖表。要使用echarts,需要先引入其所依賴的jQuery庫。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
初始化echarts需要用到一個dom容器,可以通過jQuery的選擇器獲取。
var myChart = echarts.init($('#chart-container')[0]);
其中,#chart-container是一個id為chart-container的dom元素。
初始化echarts之后可以通過設置option來配置圖表的樣式和數據。option是一個JavaScript對象,包含了多個屬性,如title、legend、tooltip、xAxis、yAxis、series等。示例代碼如下:
var option = {
title: {
text: '示例圖表'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
myChart.setOption(option);
以上代碼實現了一個簡單的柱狀圖,包含了標題、x軸、y軸和數據系列。setOption方法用于把option對象傳入,渲染出圖表。