生活随笔
收集整理的這篇文章主要介紹了
Echarts五步法加初体验
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用步驟：
引入echarts 插件文件到html頁面中準備一個具備大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
初始化echarts實例對象
var myChart
= echarts
.init(document
.getElementById('main'));
指定配置項和數據(option)
var option
= { xAxis
: { type
: 'category', data
: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis
: { type
: 'value' }, series
: [{ data
: [820, 932, 901, 934, 1290, 1330, 1320], type
: 'line' }]};
將配置項設置給echarts實例對象
myChart
.setOption(option
);
<!DOCTYPE html
>
<html lang
="en"><head><meta charset
="UTF-8" /><meta name
="viewport" content
="width=device-width, initial-scale=1.0" /><title>Document
</title
><style>.box
{width
: 300px
;height
: 300px
;background
-color
: pink
;}</style
></head
><body><div
class="box"></div
><script src
="js/echarts.min.js"></script
><script>var myChart
= echarts
.init(document
.querySelector(".box"));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
);</script
></body
>
</html
>
總結
以上是生活随笔為你收集整理的Echarts五步法加初体验的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
