echarts 柱状图、雷达图、饼图的一些基础
文章目录
- 柱状图
- 雷达图
- 饼图
柱状图
效果图
代码如下：
series: {
type: 'bar',
barWidth: 15,
data: yData,
itemStyle: {
normal: {
//这是重点；colors自己定义的颜色数组
color(params) {
var colorList = colors;
return colorList[params.dataIndex]
}
}
}
// 这是渐变色的
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#38B2E6"
},
{
offset: 1,
color: "#ddd"
}
]),
opacity: .8
},
},
}
雷达图
效果图
代码如下：
radar: {
radius: '60%', // 这是图的大小
center: ['50%', '45%'], // 这是图的位置
indicator: [ // 这是雷达图的指示器，用来指定雷达图中的多个变量
{
name: '一', max: 50},
{
name: '二', max: 50},
{
name: '三', max: 50},
{
name: '四', max: 50},
{
name: '五', max: 50},
{
name: '六', max: 50}
],
shape: 'circle', // 这是环的样式，可以是圆，可以是菱形
splitNumber: 5, // 这是环数，白色的圈
name: {
textStyle: {
color: '#0EE3AB'
}
},
nameGap: 7,
splitLine: {
lineStyle: {
color: '#ffffffaa'
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'red'
}
}
},
series: {
type: 'radar',
data: yData,
areaStyle: {
opacity: 0.3
},
lineStyle: {
width: 0.5
},
symbol: 'rect',
}
饼图
点击之后返回的参数：
代码如下：
//点击动作
myChart.setOption(option);
myChart.on("click", eConsole);
myChart.on("hover", eConsole);
function eConsole(param) {
let self = this
console.log(param)
// 点击返回的参数（具体在上面）
if (typeof param.seriesIndex != 'undefined') {
if (param.type == 'click' && Object.keys(param.data).length > 0) {
dialog.visible = true
}
}
},