echarts 堆叠柱状图3d效果_Echarts

Apache ECharts (incubating)​echarts.apache.org

引入Echarts

1、使用bootcdn

2、使用打包工具

无 webpack / parcel

直接在html引入script src=path/to/echarts.min.jsv然后使用全局变量window.echarts

有webpack / parcel

yarn add echarts

yarn add --dev @types/echarts

import echarts from 'echarts'或者var echarts =require('echarts')

然后使用echarts即可

例1：参照官方文档

其他实例折线图、柱状图等可参照官方文档

其他折线图、柱状图等实例​echarts.apache.org

如何修改外观

换主题

echarts.init(xxx, 'dark')

技巧：可将options移动到myChart.setOption里，这样就可以根据ts的提示自动找到需要更改的东西

术语速查手册 - Apache ECharts (incubating)​echarts.apache.org

更新数据：得到数据后再进行setOption

在html里添加button

给button添加点击事件

点击后

使用showloading加载动画，需要避免多次点击产生多次效果

点击事件

指用户可通过图表进行交互

点击第二点

移动端适配

1、常规技巧

使用淘宝的viewport

<

2、Echarts提供的功能

baseOption+media

把原有option都放入电脑和手机共享的baseOption里

再加一个媒体查询

在Vue中使用Echarts

yarn add vue
yarn add --dev @types/vue

获取div,设置宽高，再初始化echarts