关于echarts的使用小白必看08

A.下载和引入echarts.min.js
<script src="echarts.min.js"></script>

B.需要准备一个展示图表的容器(盒子)，盒子必须要有宽高

<div class="box" style="width:600px;height:450px;"></div>

C.初始化echarts
var myChart = echarts.init( document.querySelector(".box") )
<!-- var myChart = echarts.init( dom元素 ) -->

D.准备图表配置项
// 要到百度Echarts官网去复制option
var option={

}
E.将配置项设置给图表myChart
myChart.setOption(option)

图表配置项

title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox: 工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series: 系列列表。
color：调色盘颜色列表
grid：设置图表的边距
grid: {
top: ‘4%’,
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},

边框图片的设置

border-image-source:用来设置边框使用的背景图片的路径
例：
border-image-source: url(…/1.png)

border-image-slice: 用来设置边框图片的切割数据，切割的值不需要加px单位
例：
border-image-slice: 100 80 50 120

border-image-width:用来设置边框图片的宽度，默认情况下这个宽度和border保持一致的，也可以通过border-image-width来独立设置图片的宽度，不会压缩内容区域的，这个属性设置的宽度值需要加px单位的
一般不建议设置这个属性，采用默认即可
例：
border-image-width:30px

border-image-repeat：用来设置图片边框的延展方式，可以设置为repeat(重复，可能会导致图片边框会切割一部分)，round(让图片充满整个边框区域，不会切割一部分)，stretch(拉伸图片。默认值。)