柱状图

颜色渐变

type: "bar",
itemStyle: {// 使用echarts内置的渐变生成器color: new echarts.graphic.LinearGradient(// 分别代表右/下/左/上4个方向，取值0或1// 其中一个取值为1，表示从哪个方向进行渐变0, 0, 1, 0,  // 从左到右渐变[// 设置渐变的幅度及颜色{offset: 0, color: '#72c3ff'},{offset: 1, color: '#275bda'}b])
},

效果：

设置圆角及间隔配色

type: "bar",
itemStyle: {color: function(param) {return param.dataIndex % 2 == 0 ? "#39FEDB" : "#A442FF";},barBorderRadius: [0, 5, 5, 0]  // 上、右、下、左
},

效果：

象形柱图 pictorialBar

象形柱图是可以设置各种具象图形元素（如图片、SVG PathData等）的柱状图，往往用在信息图中。
象形柱图可以被想象为：它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。
每个象形图形根据基准柱的定位，是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。

series: [{type: "pictorialBar",  // 象形柱图symbol: 'path://d="M150 50 L130 130 L170 130  Z"',  // SVG语法itemStyle: {color: '#7760f6'}
}, {type: "pictorialBar",symbol: 'path://d="M150 50 L130 130 L170 130  Z"',barGap: "-100%",  // 与上一系列的柱形重合itemStyle: {color: '#e6b600'}
}]

效果：

饼图

南丁格尔玫瑰图

通过半径区分数据大小，可选择两种模式：

• radius 扇区圆心角展现数据的百分比，半径展现数据的大小
• area 所有扇区圆心角相同，仅通过半径展现数据大小

series: [{type: "pie",roseType: 'area',  // 玫瑰图类型，默认radiuscenter: ["50%", "50%"],  // 中心位置radius: ["0", "75%"],  // 半径范围hoverOffset: 16,selectedOffset: 16,itemStyle: {borderColor: "rgba(5, 26, 74, 1)",borderWidth: 0.5}
}]

效果 ：

扇形圆角（ECharts5+ 支持）

圆角可以带来更美观和柔和的视觉，也能够赋予更多的创造力。
ECharts5支持了饼图、旭日图、矩形树图的扇形圆角。

series: [{type: "pie",selectedMode: true,center: ["50%", "55%"],radius: ["50%", "75%"],itemStyle: {  // 扇形圆角相关设置borderRadius: 10,borderColor: "#03081d",borderWidth: 2}
}]

效果：

折线图

阶梯线图

可以设置step: true 显示成阶梯线图，也支持设置成start，middle， end 分别配置在当前点、在当前点与下个点的中间、在下个点进行拐弯。
当设置了step 属性时，smooth 属性自动失效。

series: [{name: 'Step Start',type: 'line',step: true,data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Step Middle',type: 'line',step: "middle",data: [220, 282, 201, 234, 290, 430, 410]},{name: 'Step End',type: 'line',step: "end",data: [450, 432, 401, 454, 590, 530, 510]}]

效果：

其他

查看当前ECharts版本

// 在浏览器控制台打印当前ECharts的版本号
console.log(echarts.version)

初始化时指定图表风格

// 通过init()方法的第二个参数指定图表风格
// 需要预先引入相关的风格文件
const myChart = echarts.init(document.getElementById("myChart"), "shine");

指定渲染方式

ECharts支持canvas（默认）和svg两种渲染方式，可以在初始化图表实例时通过renderer参数进行指定。

• 适合canvas渲染器的场景
  • 数据量大、图形元素数量多
  • 比较复杂的交互动画或视觉特效
• 适合svg渲染器的场景
  • 内存占用更低，渲染性能略高
  • 更适合用于移动端

// 使用svg进行渲染
const myChart = echarts.init(document.getElementById("myChart"), "shine", {renderer: "svg"
});

图表自适应浏览器窗口大小变化

// 原生写法
window.onresize = function() {myChart.resize();
}// 使用jQuery的写法
$(window).resize(function() {myChart.resize();
});

贴花图案（ECharts5 支持）

ECharts5 新增了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。

// 开启无障碍访问
aria: { enabled: true,decal: {  // 采用默认贴花图案show: true}
},
series: [{...}]

效果：

---

更多数据可视化项目实战：https://github.com/yyhsong/iDataV