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>// 初始化实例对象  echarts.init(dom容器);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>