monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit d6249153236bd28bd3ee5ed796719beaf903c3d2 1 parent 32c24db9

echarts

Inline Side-by-side
Showing 8 changed files with 599 additions and 0 deletions
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-line',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: [
  33 + ['product', '2015', '2016', '2017'],
  34 + ['示例1', 43.3, 85.8, 93.7],
  35 + ['示例2', 83.1, 73.4, 55.1],
  36 + ['示例3', 86.4, 65.2, 82.5],
  37 + ['示例4', 72.4, 53.9, 39.1]
  38 + ]
  39 + }
  40 + },
  41 + data() {
  42 + return {}
  43 + },
  44 + setup(props, {attrs, slots, emit}) {
  45 + const {proxy} = Vue.getCurrentInstance();
  46 +
  47 + let id = "line" + (new Date()).getTime();
  48 +
  49 +
  50 +
  51 + let getOption = () => {
  52 +
  53 + let sourceData = props.sourceData;
  54 + let arr = [];
  55 + for (let i = 0; i < sourceData[0].length; i++) {
  56 + arr.push({type: 'bar'})
  57 + }
  58 + let option = {
  59 + legend: {
  60 + right:'20px',
  61 + itemWidth:25,
  62 + itemHeight:5,
  63 + textStyle: {
  64 + color: '#fff',
  65 + fontSize: 7
  66 + }
  67 + },
  68 + tooltip: {
  69 + trigger: 'axis',
  70 + axisPointer: {
  71 + type: 'shadow'
  72 + },
  73 + backgroundColor: 'rgba(50,50,50,0.7)',
  74 + borderColor: '#333',
  75 + textStyle: {
  76 + color: '#fff',
  77 + align: 'left'
  78 + }
  79 + },
  80 + dataset: {
  81 + source: props.sourceData
  82 + },
  83 + grid: {
  84 + top: '30px',
  85 + left: '10px',
  86 + right: '10px',
  87 + bottom: '10px',
  88 + containLabel: true
  89 + },
  90 +
  91 + xAxis: {type: 'category'},
  92 + yAxis: {
  93 + axisLabel: {
  94 + formatter: '{value}',//以百分比显示
  95 + color:'#ffffff',
  96 + },
  97 + splitLine:{
  98 + lineStyle: {
  99 + type: 'dashed',
  100 + color:'#313c5e'
  101 + }
  102 + },
  103 + axisLine:{
  104 + type:'do',
  105 + show:true,//是否显示坐标线
  106 + lineStyle: {
  107 + color:'#21bad6'
  108 + }
  109 + },
  110 + },
  111 + series: arr
  112 + };
  113 +
  114 + let line = echarts.init(document.getElementById(id));
  115 + setTimeout(function () {
  116 + line.clear();
  117 + line.setOption(option);
  118 + }, 200);
  119 + }
  120 +
  121 + // 挂载完
  122 + Vue.onMounted(() => {
  123 + getOption();
  124 + })
  125 +
  126 + return {
  127 + id
  128 + }
  129 + }
  130 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'barStack',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: [
  33 + ['product', '2015', '2016', '2017'],
  34 + ['示例1', 43.3, 85.8, 93.7],
  35 + ['示例2', 83.1, 73.4, 55.1],
  36 + ['示例3', 86.4, 65.2, 82.5],
  37 + ['示例4', 72.4, 53.9, 39.1]
  38 + ]
  39 + }
  40 + },
  41 + data() {
  42 + return {}
  43 + },
  44 + setup(props, {attrs, slots, emit}) {
  45 + const {proxy} = Vue.getCurrentInstance();
  46 +
  47 + let id = "line" + (new Date()).getTime();
  48 +
  49 +
  50 + let getOption = () => {
  51 +
  52 + let sourceData = props.sourceData;
  53 + let arr = [];
  54 + for (let i = 1; i < sourceData[0].length; i++) {
  55 + let nameItem = sourceData[0][i];
  56 + let name = nameItem;
  57 + if(nameItem && nameItem.name){
  58 + name = nameItem.name;
  59 + }
  60 + arr.push({
  61 + name: name,
  62 + type: 'bar',
  63 + stack: 'total',
  64 + label: {
  65 + show: false
  66 + },
  67 + emphasis: {
  68 + focus: 'series'
  69 + },
  70 + itemStyle: {
  71 + normal: {
  72 + color: nameItem.color,
  73 + lineStyle: {
  74 + color: nameItem.color,
  75 + width: 1
  76 + }
  77 + }
  78 + },
  79 + })
  80 + }
  81 + let option = {
  82 + legend: {
  83 + itemWidth: 25,
  84 + itemHeight: 2,
  85 + textStyle: {
  86 + color: '#fff',
  87 + fontSize: "12px"
  88 + }
  89 + },
  90 + tooltip: {
  91 + trigger: 'axis',
  92 + axisPointer: {
  93 + type: 'shadow'
  94 + },
  95 + backgroundColor: 'rgba(50,50,50,0.7)',
  96 + borderColor: '#333',
  97 + textStyle: {
  98 + color: '#fff',
  99 + align: 'left'
  100 + }
  101 + },
  102 + dataset: {
  103 + source: props.sourceData
  104 + },
  105 + grid: {
  106 + top: '30px',
  107 + left: '10px',
  108 + right: '10px',
  109 + bottom: '10px',
  110 + containLabel: true
  111 + },
  112 +
  113 + xAxis: {
  114 + type: 'category',
  115 + splitLine: {
  116 + lineStyle: {
  117 + type: 'dashed',
  118 + color: '#313c5e'
  119 + }
  120 + },
  121 + axisLine: {
  122 + type: 'do',
  123 + show: true,//是否显示坐标线
  124 + lineStyle: {
  125 + color: '#21bad6'
  126 + }
  127 + },
  128 + axisLabel: {
  129 + color: '#ffffff',
  130 + fontSize: 10,
  131 + formatter: function (params) {
  132 + var newParamsName = '';
  133 + let paramsNameNumber = params.length;
  134 + let provideNumber = 3;
  135 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  136 + if (paramsNameNumber > provideNumber) {
  137 + for (let i = 0; i < rowNumber; i++) {
  138 + let tempStr = '';
  139 + let start = i * provideNumber;
  140 + let end = start + provideNumber;
  141 + if (i == rowNumber - 1) {
  142 + tempStr = params.substring(start, paramsNameNumber);
  143 + } else {
  144 + tempStr = params.substring(start, end) + "\n";
  145 + }
  146 + newParamsName += tempStr;
  147 + }
  148 + } else {
  149 + newParamsName = params;
  150 + }
  151 + return newParamsName;
  152 + },
  153 + textStyle: {
  154 + rich: {
  155 + white: {
  156 + padding: [1, 0, 0, 0]
  157 + }
  158 + }
  159 + }
  160 + },
  161 + },
  162 + yAxis: {
  163 + axisLabel: {
  164 + formatter: '{value}',//以百分比显示
  165 + color: '#ffffff',
  166 + },
  167 + splitLine: {
  168 + lineStyle: {
  169 + type: 'dashed',
  170 + color: '#313c5e'
  171 + }
  172 + },
  173 + axisLine: {
  174 + type: 'do',
  175 + show: true,//是否显示坐标线
  176 + lineStyle: {
  177 + color: '#21bad6'
  178 + }
  179 + },
  180 + },
  181 + series: arr
  182 + };
  183 +
  184 + let line = echarts.init(document.getElementById(id));
  185 + setTimeout(function () {
  186 + line.clear();
  187 + line.setOption(option);
  188 + }, 200);
  189 + }
  190 +
  191 + // 挂载完
  192 + Vue.onMounted(() => {
  193 + getOption();
  194 + })
  195 +
  196 + return {
  197 + id
  198 + }
  199 + }
  200 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-line',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: ['年报', '月报', '周报', '日报']
  33 + }
  34 + },
  35 + data() {
  36 + return {}
  37 + },
  38 + setup(props, {attrs, slots, emit}) {
  39 + const {proxy} = Vue.getCurrentInstance();
  40 +
  41 + let id = "line" + (new Date()).getTime();
  42 +
  43 +
  44 + let getOption = () => {
  45 +
  46 + let size = 100 / props.sourceData.length;
  47 +
  48 + let seriesData = props.sourceData.map(function (v, i) {
  49 + return {value: (i + 1) * size, name: v};
  50 + })
  51 + let option = {
  52 + title: {
  53 + text: 'Funnel Compare',
  54 + subtext: 'Fake Data',
  55 + left: 'left',
  56 + top: 'bottom',
  57 + show: false
  58 + },
  59 + tooltip: {
  60 + trigger: 'item',
  61 + formatter: '{b} : {c}%'
  62 + },
  63 + toolbox: {},
  64 + legend: {
  65 + show: false,
  66 + orient: 'vertical',
  67 + left: 'left',
  68 + data: props.sourceData
  69 + },
  70 + series: [
  71 + {
  72 + name: '',
  73 + type: 'funnel',
  74 + left: '10',
  75 + top: 20,
  76 + bottom: 20,
  77 + width: '80%',
  78 + min: 100,
  79 + max: 0,
  80 + minSize: '0%',
  81 + maxSize: '100%',
  82 + sort: 'descending',
  83 + gap: 2,
  84 + label: {
  85 + show: true,
  86 + width: 100,
  87 + position: ''
  88 + },
  89 + labelLine: {
  90 + length: 10,
  91 + lineStyle: {
  92 + width: 1,
  93 + type: 'solid'
  94 + }
  95 + },
  96 + itemStyle: {
  97 + borderColor: '#fff',
  98 + borderWidth: 1
  99 + },
  100 + emphasis: {
  101 + label: {
  102 + fontSize: 20
  103 + }
  104 + },
  105 + data: seriesData
  106 + }
  107 + ]
  108 + };
  109 +
  110 + let line = echarts.init(document.getElementById(id));
  111 + setTimeout(function () {
  112 + line.clear();
  113 + line.setOption(option);
  114 + }, 200);
  115 + }
  116 +
  117 + // 挂载完
  118 + Vue.onMounted(() => {
  119 + getOption();
  120 + })
  121 +
  122 + return {
  123 + id
  124 + }
  125 + }
  126 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-pie',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + // 列表
  31 + pieType: {
  32 + type: String,
  33 + default: ''
  34 + },
  35 + seriesData: {
  36 + type: Array,
  37 + default: [{
  38 + name: '',
  39 + data: [
  40 + {value: 1048, name: '示例1'},
  41 + {value: 735, name: '示例2'},
  42 + {value: 580, name: '示例3'},
  43 + {value: 484, name: '示例4'},
  44 + {value: 300, name: '示例5'}
  45 + ]
  46 + }
  47 + ]
  48 + }
  49 + },
  50 + data() {
  51 + return {}
  52 + },
  53 + setup(props, {attrs, slots, emit}) {
  54 + const {proxy} = Vue.getCurrentInstance();
  55 +
  56 + let id = "pie" + (new Date()).getTime();
  57 +
  58 + let pieClick = (param) => {
  59 + emit('pieClick', param, props.pieType);
  60 + }
  61 +
  62 + let getOption = () => {
  63 + let series = props.seriesData.map(function (v) {
  64 + return {
  65 + name: v.name,
  66 + type: 'pie',
  67 + radius: '80%',
  68 + data: v.data,
  69 + center: ['30%', '50%'],
  70 + label: {
  71 + show: false,
  72 + position: 'center'
  73 + },
  74 + labelLine: {
  75 + show: false
  76 + },
  77 + emphasis: {
  78 + itemStyle: {
  79 + shadowBlur: 10,
  80 + shadowOffsetX: 0,
  81 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  82 + }
  83 + }
  84 + }
  85 + })
  86 +
  87 + let option = {
  88 + title: props.title,
  89 + tooltip: {
  90 + trigger: 'item',
  91 + axisPointer: {
  92 + type: 'shadow'
  93 + },
  94 + backgroundColor: 'rgba(50,50,50,0.7)',
  95 + borderColor: '#333',
  96 + textStyle: {
  97 + color: '#fff',
  98 + align: 'left'
  99 + }
  100 + },
  101 + legend: {
  102 + orient: 'vertical',
  103 + left: 'right',
  104 + y: 'bottom',
  105 + itemWidth: 25,
  106 + itemHeight: 5,
  107 + textStyle: {
  108 + color: '#fff',
  109 + fontSize: 10
  110 + }
  111 + },
  112 + series: series
  113 + };
  114 +
  115 +
  116 + let pie = echarts.init(document.getElementById(id));
  117 + setTimeout(function () {
  118 + pie.clear();
  119 + pie.setOption(option);
  120 +
  121 + pie.on("click", pieClick);
  122 + }, 200);
  123 +
  124 + }
  125 +
  126 + // 挂载完
  127 + Vue.onMounted(() => {
  128 + getOption();
  129 + })
  130 +
  131 + return {
  132 + id
  133 + }
  134 + }
  135 +}