关于echarts的使用

很多人会有疑问，为什么要用echarts? 开会我用个正常表格，做个PPT来展示不可以吗。

其实显然易见，用可视化来展示我们的大数据内容，是大势所趋，在注重用户体验的今天，你光用简单的表单表格来展示数据内容已经满足不了需求和体验，而用可视化来展示数据能给人最直接的感受，所以不要在抗拒echarts了，让我们一起来使用echarts吧。

那说到echarts，echarts是什么呢？ 以及echarts怎么使用呢，下面就让笔者带领你们来领略一下echarts的神奇。

A.下载和引入echarts.min.js

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

C.初始化echarts
var myChart = echarts.init( document.querySelector(".box") )

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

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

图表配置项
title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox: 工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series: 系列列表。
color：调色盘颜色列表

边框图片的设置
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(拉伸图片。默认值。)
————————————————
版权声明：本文为CSDN博主「(天空)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cxy9999999/article/details/106817094