Echarts炫酷配置
柱状图
grid: {
top: "15%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true, //刻度显示
},
color: "#00edff", //直接设置柱状图的柱状颜色，多个的话可以写成数组
dataZoom: [
{
type: "slider", //提供一个滑块可以左右滑动来进行数据筛选，说白了就是把想看到的数据放大，还有一个属性值`inside`这个是可以直接通过鼠标滚轮进行筛选，内置，下面不会出现滑块
yAxisIndex: 0, //第一条y轴
show: true, //柱状数据显示
height: "85%",
width:'6%',
bottom: '5%',
left: "5%",
textStyle: {
//柱状数据文字
color: "white",
fontSize:20
},
// borderColor: "transparent", //滚动条边框
backgroundColor: "#11c19c", //滚动长条颜色
// 拖拽手柄样式 svg 路径
handleColor: "red", //滚动颜色
handleSize: 30, //手柄大小也就是滚动的小圆点
start: 100, //终止百分比
end: this.index, //这个是我封装的终止跟返回值
},
],
饼图
tooltip: {
trigger: "item",
formatter: " {b}:<br/>{c} ({d}%)",
},
title: [
{
subtext: "年度综合能耗占比", //副标题
left: "76%",
top: "8%",
textAlign: "center", //副标题位置
subtextStyle: {
//副标题文字效果
color: "white",
fontSize:18
},
},
legend: {
//过滤标题也就是分类的小模块
left: "center",
top: "14%",
data: this.data; //vue获取的数据
itemWidth: 30, //小模块大小
itemHeight: 15,
},
toolbox: {
//内置对象 有导出图片，数据视图，动态类型切换，数据区域缩放，重置的美好
show: true,//是否显示工具栏组件
feature: {
//除了各个内置的工具按钮外，还可以自定义工具按钮。
mark: {
show: true },
magicType: {
show: true,
type: ["pie", "funnel"], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
},
},
},
series: [
{
type: "pie",
radius: "50%",
center: ["25%", "60%"],
roseType: "radius",//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
//'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
//'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
label: {
show: true, //显示数据
},
data: this.data,
startAngle: 150, //坐标系起始角度，也就是第一个指示器轴的角度。可以旋转
itemStyle: {
normal: {
label: {
show: true,
position: "outer", //内容显示在外面
fontSize: 12,
fontWeight: "bold",
align: "left",
formatter: "{b}:({d}%)",
},
labelLine: {
//指示线状态
show: true,
smooth: 0.4,
length: 15,
length2: 15,
smooth: true,
},
},
},
},
],
// roseType: "radius", //南丁格尔图 半径取决于数据大小这个跟上面的radius不能同用
// selectedMode: "single", //设置选中的效果，能够将选中的区域偏离原点一小段距离,`multiple`可以实现多选偏离因为前面那个属性值离开的时候他会自动还原
// selectedOffset: 20, //设置偏离的距离
}
折线图
这里主要讲基准线
series: [
//省略部分代码
{
// areaStyle: {},
// smooth: true,
name: "计划",
type: "line",
markLine: {
// symbol: "none", //基线两头是否有起始标记
label: {
position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
formatter: this.data+"(kw/h)",
// color: "red",
fontSize: 18,
},
lineStyle: {
normal: {
color: "#fcff00",
type: "dashed",
},
// animationThreshold:2
},
data: [{
yAxis: this.data, name: "min" }], //基准线数值
},