生活随笔
收集整理的這篇文章主要介紹了
Echarts五步法加初体验
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
使用步驟：
引入echarts 插件文件到html頁(yè)面中準(zhǔn)備一個(gè)具備大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
初始化echarts實(shí)例對(duì)象
var myChart
= echarts
.init(document
.getElementById('main'));
指定配置項(xiàng)和數(shù)據(jù)(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' }]};
將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
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 入門(mén)示例"},tooltip
: {},legend
: {data
: ["銷量"]},xAxis
: {data
: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]},yAxis
: {},series
: [{name
: "銷量",type
: "bar",data
: [5, 20, 36, 10, 10, 20]}]};myChart
.setOption(option
);</script
></body
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的Echarts五步法加初体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
