目前已发表25篇文章
vue+echarts系列教程旨在为开发者提供简单快捷的代码示例,复制即可用。在每一个示例中,解释相应的API知识点,做到简易实现,轻松学会。
通常一个Echarts图表通常由title(标题)、legend(图例)、grid(网格)xAxis(x轴)、yAxis(y轴)、dataZoom(区域缩放)tooltip(提示框组件)、toolbox(工具栏)、series(系列列表。每个系列通过 type 决定自己的图表类型)组成。例子如下图所示:
目录正在建设中,
基本操作
序号 | 标题 |
---|---|
1 | vue中安装与引用echarts示例 |
2 | Echarts 配置横轴竖轴指示线,更换颜色、线型和大小 |
系列 Series
序号 | 标题 |
---|---|
折线图 line | Echarts的Y轴添加定值横线的示例) |
折线图 line | Echarts 设置面积区域图(areaStyle核心) |
折线图 line | Echarts 设置折线图线条样式(虚线+粗细+阴影) |
折线图 line | Echarts 设置折线拐点大小、类型等,默认下不显示拐点 |
折线图 line | Echarts 设置折线拐点的颜色,边框等,hover时改变颜色 |
折线图 line | Echarts 折线图拐点超过某值突出显示,颜色变红 |
柱状图 bar | Echarts 柱状图横向展示和竖向展示 |
柱状图 bar | Echarts修改柱状图柱子的宽度 |
柱状图 bar | Echarts柱形头部圆弧处理 |
柱状图 bar | Echarts解决左右上下边距问题( 两种方法) |
柱状图 bar | ECharts线性渐变色示例演示(2种渐变方式) |
象形柱状图 | Echarts 实现电池效果的柱状图 |
象形柱状图 | 每个柱子一种渐变色的象形柱状图 |
圆形柱状图 | ECharts 圆形柱状图设置角度和最大值 |
饼图 pie | Echarts 用图形纹理来填充颜色(color - pattern) |
饼图 pie | Echarts环形图、饼图径向渐变示例 |
饼图 pie | Echarts环形图线性渐变,hover后显示阴影 |
仪表盘 gauge | Echarts 仪表盘倾斜一定角度显示,非中间对称 |
仪表盘 gauge | Echarts 模拟汽车速度和油量的仪表显示,两个仪表盘同图 |
雷达图 radar | Echarts 修改雷达图背景分割面,分割线颜色,设置数据线颜色 |
雷达图 radar | Echarts 雷达图设置拐点大小和形状,tooltip后文字不居中对齐 |
K线图 candlestick | Echarts 更改K线图颜色,解释K线图4个数字意义 |