配备项：

option = {
 title: {
 text: '新项目時间遍布',
 left: 'center'
 tooltip: {
 trigger: 'item',
 formatter: '{a} br/ {b} : {c} ({d}%)'
 legend: {
 orient: 'vertical',
 left: 'left',
 data: ['智能化化新项目', '智能化化集成化', '中央空调操纵系统软件']
 series: [
 name: '浏览来源于',
 type: 'pie',
 radius: '55%',
 center: ['50%', '60%'],
 label: {
 normal: {
 formatter: "{per|{d}%} \n{hr|}\n {b|{b}}",
 align: "right",
 rich: {
 hr: {
 borderColor: "#aaa",
 width: "100%",
 borderWidth: 1,
 height: 0
 b: {
 fontSize: 14,
 color: "#000",
 lineHeight: 20
 per: {
 color: "#000",
 fontSize: 16,
 lineHeight: 20
 data: [
 {value: 5, name: '智能化化新项目'},
 {value: 12, name: '智能化化集成化'},
 {value: 169, name: '中央空调操纵系统软件'},
 emphasis: {
 itemStyle: {
 shadowBlur: 10,
 shadowOffsetX: 0,
 shadowColor: 'rgba(0, 0, 0, 0.5)'
};

View Code

运作实际效果：

 

 座标轴显示信息箭头符号，刻度标识超过显示信息省去号

配备项：

const alarmRankOptions = {
 color: ['rgba(184,114,58,1)'], //['#A96932'],
 tooltip: {
 trigger: 'axis',
 axisPointer: {
 // 座标轴标示器，座标轴开启合理
 type: 'shadow' // 默认设置为平行线，可选择为：'line' | 'shadow'
 grid: {
 left: '3%',
 right: '4%',
 bottom: '0',
 containLabel: true,
 borderColor: 'red'
 xAxis: [
 type: 'category',
 data: [],
 axisTick: {
 alignWithLabel: true
 // nameLocation:'end',//座标轴名字显示信息部位。
 // x轴的字体样式款式
 axisLabel: {
 show: true,
 textStyle: {
 color: '#E6EFFF'
 interval: 0 //横轴信息内容所有显示信息
 // x轴的色调和总宽
 axisLine: {
 lineStyle: {
 color: '#3C6581',
 width: 1 //这儿是座标轴的总宽,能够除掉
 yAxis: [
 minInterval: 1,
 type: 'value',
 name: '总数：个',
 nameTextStyle: {
 color: '#E6EFFF'
 axisLabel: {
 show: true,
 textStyle: {
 color: '#E6EFFF'
 // y轴的色调和总宽
 axisLine: {
 show: true,
 lineStyle: {
 color: '#3C6581',
 width: 1 //这儿是座标轴的总宽
 symbol: ['none', 'arrow'],
 symbolSize: [6, 10] //第一数量字表明总宽（竖直座标轴方位），第二数量字表明高宽比（平行面座标轴方位）。
 //情况网格图线
 splitLine: {
 show: false,
 lineStyle: {
 // 应用浓淡的间距色
 color: '#ccc',
 type: 'dashed',
 shadowBlur: 10
 series: [
 name: '待处理警报数',
 type: 'bar',
 barWidth: '20',
 label: {
 normal: {
 show: true,
 position: 'top' //'inside'
 data: [10, 52, 200, 334, 390, 330, 220, 40]
export { alarmRankOptions };

View Code

运作結果：

 

 环状标志签显示信息值

配备项：

export const PieOption = {
 grid: {
 left: 50,
 right: 0,
 top: 0,
 containLabel: true,
 zlevel: 99999
 tooltip: {
 trigger: "item",
 formatter: "{b}: {c}次 ({d}%)"
 color: ["#ee6e6d", "#f19469", "#e7bf5f", "#74b8dd", "#67cb82"],
 title: {
 text: 0,
 textStyle: {
 color: "#3A3A3A",
 fontSize: 30,
 fontWeight: "normal"
 subtext: "",
 subtextStyle: {
 color: "#3A3A3A",
 fontSize: 14
 x: "center",
 y: "49%"
 // y: "46%"
 series: [
 name: "",
 type: "pie",
 // minAngle: 5, //最少的扇区视角（0 ~ 360），用以避免某一值过小造成扇区很小危害互动
 avoidLabelOverlap: true, //是不是开启避免标识重合对策
 // radius: ["37%", "55%"],
 radius: ["32%", "46%"],
 center: ["50%", "54%"],
 // center: ["50%", "60%"],
 // radius: ["50%", "50%"],
 itemStyle: {
 borderColor: "rgba(255,255,255,1)",
 borderWidth: 8
 label: {
 normal: {
 formatter: "{per|{d}%} \n{hr|}\n {b|{b}}",
 align: "right",
 rich: {
 hr: {
 borderColor: "#aaa",
 width: "100%",
 borderWidth: 1,
 height: 0
 b: {
 fontSize: 14,
 color: "#000",
 lineHeight: 20
 per: {
 color: "#000",
 fontSize: 16,
 lineHeight: 20
 labelLine: {},
 data: [
 value: 150,
 name: "一级告警"
 // itemStyle: {
 // color: '#ee6e6d'
 // }
 value: 50,
 name: "二级告警"
 // itemStyle: {
 // color: '#f19469'
 // }
 value: 300,
 name: "三级告警"
 // itemStyle: {
 // color: '#e7bf5f'
 // }
 value: 500,
 name: "四级告警"
 // itemStyle: {
 // color: '#74b8dd'
 // }
 value: 350,
 name: "五级告警"
 // itemStyle: {
 // color: '#67cb82'
 // }
};

View Code

运作結果：

 

 

 

柱状图水准翻转条

配备项：

export const BarOption = {
 color: ["#F1726b", "#f58e6b", "#e7c156", "#73b9dd", "#65ca84"],
 tooltip: {
 trigger: "axis",
 axisPointer: {
 // 座标轴标示器，座标轴开启合理
 type: "shadow" // 默认设置为平行线，可选择为：'line' | 'shadow'
 dataZoom: ConstDataZoom,
 legend: {
 data: ["一级", "二级", "三级", "四级", "五级"],
 itemWidth: 9,
 itemHeight: 9,
 itemGap: 20,
 right: 45
 grid: {
 left: 50,
 right: 0,
 top: 30,
 containLabel: true
 xAxis: [
 type: "category",
 silent: false,
 data: [
 "一月",
 "二月",
 "三月",
 "4月",
 "五月",
 "6月",
 "8月",
 "八月",
 "九月份",
 "十月",
 "十一月",
 "11月"
 axisTick: {
 alignWithLabel: true
 splitLine: {
 show: true,
 lineStyle: {
 // 网格图色调
 color: ["#E5EFF5"]
 axisLine: {
 lineStyle: {
 color: "#ccc"
 axisLabel: {
 color: "#3A3A3A",
 interval: "auto"
 splitArea: {
 show: false
 yAxis: [
 type: "value",
 name: "频次",
 minInterval: 1, //设定成1确保座标轴切分刻度显示信息成整数金额。
 nameTextStyle: {
 color: "#838383"
 splitLine: {
 show: true,
 lineStyle: {
 // 网格图色调
 color: ["#E5EFF5"]
 axisLine: {
 lineStyle: {
 color: "#E5EFF5"
 axisLabel: {
 color: "#3A3A3A",
 interval: 0
 series: [
 name: "一级",
 type: "bar",
 data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390]
 name: "二级",
 type: "bar",
 data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290]
 name: "三级",
 type: "bar",
 data: [150, 232, 201, 154, 190, 150, 232, 201, 154, 190]
 name: "四级",
 type: "bar",
 data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290]
 name: "五级",
 barGap: 0,
 type: "bar",
 data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290]
};

View Code

运作結果：

 

dengb.TechArticleecharts 各种各样动画特效图，echarts关联图 饼标志签展现标值 配备项： option = { title: { text: '新项目時间遍布' , left: 'center' }, tooltip: { trigger: 'item' , for...

• 上一篇：sem融合营销推广
• 下一篇：没有了