echarts学习手记

下载组件引入组件npm install echarts--saveimport*asechartsfromecharts;// 基于准备好的dom初始化echarts实例varmyChartecharts.init(document.getElementById(main));// 绘制图表myChart.setOption({title:{text:ECharts 入门示例},tooltip:{},xAxis:{data:[衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子]},yAxis:{},series:[{name:销量,type:bar,data:[5,20,36,10,10,20]}]});// 引入 echarts 核心模块核心模块提供了 echarts 使用必须要的接口。import*asechartsfromecharts/core;// 引入柱状图图表图表后缀都为 Chartimport{BarChart}fromecharts/charts;// 引入标题提示框直角坐标系数据集内置数据转换器组件组件后缀都为 Componentimport{TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent}fromecharts/components;// 标签自动布局、全局过渡动画等特性import{LabelLayout,UniversalTransition}fromecharts/features;// 引入 Canvas 渲染器注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import{CanvasRenderer}fromecharts/renderers;// 注册必须的组件echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer]);// 接下来的使用就跟之前一样初始化图表设置配置项挂载之后才能获取容器dom并初始化图表varmyChartecharts.init(document.getElementById(main));myChart.setOption({// ...});监听浏览器大小可以改变图标大小window.addEventListener(‘resize’, function() {myChart.resize();});在图表容器被销毁之后调用 echartsInstance.dispose 销毁实例在图表容器重新被添加后再次调用 echarts.init 初始化。图表可以自己设置颜色主题在图表容器被销毁之后调用 echartsInstance.dispose 销毁实例在图表容器重新被添加后再次调用 echarts.init 初始化。使用 seriesLayoutBy 配置项改变图表对于行列的理解