|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <jt-echarts style="width: 320rem;height: 260rem;margin:10rem 10rem 10rem 20rem;"
|
|
|
+ :chartData="option"></jt-echarts>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import * as echarts from "echarts";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // category: "", //横坐标
|
|
|
+ // yData: [1000, 1500, 1300, 1700, 1600, 1200],
|
|
|
+ // y2Data: [1200, 1800, 1400, 1350, 1100, 1500],
|
|
|
+ option: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.typeCharts0()
|
|
|
+ // let _this = this
|
|
|
+ // var t1=setTimeout(function() {
|
|
|
+ // _this.option.series = [{
|
|
|
+ // data: _this.category
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // data: _this.dottedBase
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+
|
|
|
+ // }, 1000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ typeCharts0() {
|
|
|
+ var getName =['小花','小明','小红','吓不不','刃甲','加加','鸿基','新能源','家喻户晓','老师'];
|
|
|
+ var getValue =[219,241,174,44,435,617,114,82,77,50];
|
|
|
+ var max = Math.max.apply(null, getValue);
|
|
|
+ var getMax=[];
|
|
|
+ for(var i=0;i<getName.length;i++){
|
|
|
+ getMax.push(max)
|
|
|
+ }
|
|
|
+ console.log(getMax) ;
|
|
|
+ // typeCharts0() {
|
|
|
+ // this.option = this.getOption();
|
|
|
+ // // var chartDom = document.getElementById('echarts');
|
|
|
+ // // var myChart = echarts.init(chartDom);
|
|
|
+ // // myChart.setOption(option, true);
|
|
|
+ // },
|
|
|
+ this.option = {
|
|
|
+ // backgroundColor: "#003366",
|
|
|
+ grid: {
|
|
|
+ left: '4%',
|
|
|
+ right: '2%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '2%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'none'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ return params[0].name + ' : ' + params[0].value
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ offset: 100,
|
|
|
+
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ align: 'left',
|
|
|
+ textStyle: {
|
|
|
+ color: '#66cc00',
|
|
|
+
|
|
|
+ },
|
|
|
+ formatter: function(value, index) {
|
|
|
+ var num = ''
|
|
|
+ var str = ''
|
|
|
+ var no = 'NO.';
|
|
|
+ num = (index + 1);
|
|
|
+ if (index === 0) {
|
|
|
+ str = '{no1|' + no + '} {num1|' + num + '} {title1|' + value + '}'
|
|
|
+ } else if (index === 1) {
|
|
|
+ str = '{no2|' + no + '} {num2|' + num + '} {title2|' + value + '}'
|
|
|
+ } else if (index === 2) {
|
|
|
+ str = '{no3|' + no + '} {num3|' + num + '} {title3|' + value + '}'
|
|
|
+ } else {
|
|
|
+ str = '{no|' + no + '} {num|' + num + '} {title|' + value + '}'
|
|
|
+ }
|
|
|
+ return str;
|
|
|
+
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ no: {
|
|
|
+ color: '#ffcccc',
|
|
|
+ fontSize: 14,
|
|
|
+
|
|
|
+ },
|
|
|
+ no1: {
|
|
|
+ color: '#ff4d4d',
|
|
|
+ fontSize: 14,
|
|
|
+
|
|
|
+ },
|
|
|
+ no2: {
|
|
|
+ color: '#4dd2ff',
|
|
|
+ fontSize: 14,
|
|
|
+
|
|
|
+ },
|
|
|
+ no3: {
|
|
|
+ color: '#ffff00',
|
|
|
+ fontSize: 14,
|
|
|
+
|
|
|
+ },
|
|
|
+ num: {
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#ffcccc',
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 100
|
|
|
+ },
|
|
|
+ num1: {
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#ff4d4d',
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 100
|
|
|
+ },
|
|
|
+ num2: {
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#4dd2ff',
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 100
|
|
|
+ },
|
|
|
+ num3: {
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#ffff00',
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 100
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+
|
|
|
+ color: '#ffcccc',
|
|
|
+ },
|
|
|
+ title1: {
|
|
|
+
|
|
|
+ color: '#ff4d4d',
|
|
|
+ },
|
|
|
+ title2: {
|
|
|
+
|
|
|
+ color: '#4dd2ff',
|
|
|
+ },
|
|
|
+ title3: {
|
|
|
+
|
|
|
+ color: '#ffff00',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: getName
|
|
|
+ }, {
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ offset: -50,
|
|
|
+ axisTick: 'none',
|
|
|
+ axisLine: 'none',
|
|
|
+ show: true,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: '12'
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ data: getValue
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '值',
|
|
|
+ type: 'bar',
|
|
|
+ zlevel: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 30,
|
|
|
+ // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: 'rgb(128,204,255,1)'
|
|
|
+ // }, {
|
|
|
+ // offset: 1,
|
|
|
+ // color: 'rgb(46,200,207,1)'
|
|
|
+ // }]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 20,
|
|
|
+ data: getValue
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '背景',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ barGap: '-100%',
|
|
|
+ data: getMax,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(24,31,68,1)',
|
|
|
+ barBorderRadius: 30,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|
