echarts图表的内边距_echartsjs 图表工具 使用

官网下载 和 引入 后

https://gallery.echartsjs.com/

第一步 准备好 dom 容器

第二步 调用echaerts init方法 ，传入dom节点，图表展示选中的容器中

第三步准备图表数据和配置

第四步 把配置项和数据 传入图表，形成图表

。。。。。。。。。。。。。

解析 option 里面 东西在什么位置，放什么数据

title 标头

tooltip提示框

tooltip ={ //提示框组件

trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发

showContent:true, //是否显示提示框浮层

alwaysShowContent:true, //是否永远显示提示框内容

showDelay:0, //浮层显示的延迟，单位为 ms

hideDelay:100, //浮层隐藏的延迟，单位为 ms

enterable:false, //鼠标是否可进入提示框浮层中

confine:false, //是否将 tooltip 框限制在图表的区域内

transitionDuration:0.4, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动

position:['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，

formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等

backgroundColor:"transparent", //标题背景色

borderColor:"#ccc", //边框颜色

borderWidth:0, //边框线宽

padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]

textStyle:mytextStyle, //文本样式

};

legend 下面名字必须一致

xAxis 代表X轴上的数据

yAxis Y轴上的数据，如果是折线图饼状图 ，不需要自己设置高度

series 展示数据

type 展示图表的样式 bar（柱状图）

Y轴依赖于 数据 的最大值取整，所以 Y轴最大值 40

还有很多 属性，每个图表属性都不同，有些属性 图表有，有些没有。

异步数据加载

数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

配置项里面东西可以先为空，在ajax发送后 把对象数据传入setOption 。

图表 两侧 会有预留的空白间距

这行可以去掉默认带的间距