经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Echarts » 查看文章
vue中使用echarts的示例
来源：jb51　　时间：2021/1/4 9:00:56　　对本文有异议

1:首先要用到echarts

2：在vue中安装这个依赖

3：引入要用的页面

  1. import echarts from 'echarts';

4：然后初始化

  1. <template>
  2.  <a-col span="12" style="min-height:343px;width:100%;background:#fff" ref="getwidth" :style="'display:'+ model">
  3.   <div class="layui-col-md6 tjgx-panel" >
  4.      <div class="layui-card">
  5.       <div class="layui-card-header panel-title">
  6.     <span class="left-text" >统计更新及时率</span>
  7.        <a class="close-link right-text" @click="onHide">
  8.         <a-icon type="close" style="color: #b0b0b0;" />
  9.        </a>
  10.        <div class="right-text" style="color: #b0b0b0;">
  11.         <span v-for="(item,index) in activeList" :key="index" 
  12.         :class="item.is_active?'acitive':''"
  13.         @click.stop="Onactive(item,index)"
  14.          class="week " ref="alist">{{item.name}}</span>
  15.         <!-- <span class="month">本月</span>
  16.         <span class="year">本年</span> -->
  17.        </div>
  18.       </div>
  19.       <div class="layui-card-body common-height">
  20.        <echartsModal
  21.         :Maxwidths ="widths"
  22.         :MinHeight="MHeight"
  23.         :echartsColor="xAxis.color"
  24.         :legendWAndH="legendWAndH"
  25.         :xAxisData="xAxis.data"
  26.         :seriesData="xAxis.x.data"
  27.         :SerNameValue="xAxis.SerNameValue"
  28.         :echartsName="xAxis.name"
  29.        />
  30.        <!-- <div class="tjgx-con" id="container" style="min-height:280px;" :style="'width:'+widths+'px'" ></div> -->
  31.       </div>
  32.      </div>
  33.     </div>
  34.  </a-col>
  35. </template>
  36. <script>
  37. import echartsModal from '../../viewModal/Echarts'
  38. // import echarts from 'echarts';
  39. export default {
  40.  components:{
  41.   echartsModal
  42.  },
  43.  data(){
  44.  return{
  45.   model:'block',
  46.   widths:'',
  47.   legendWAndH:[15,15,18],
  48.   MHeight:'',
  49.   xAxis:{
  50.    data: ['广州', '深圳', '珠海', '汕头', '佛山', '韶关', '湛江', '肇庆', '江门', '茂名', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
  51.    x:{
  52.    data: [7.9, 2, 6, 5, 7, 5, 7, 80, 6, 7, 6, 86, 6, 56, 7, 6, 8, 5, 4, 7, 8],
  53.    // data: [87.9, 58, 67, 56, 72, 54, 74, 59, 64, 75, 68, 47, 63, 89, 78, 64, 82, 56, 40, 73, 80],
  54.    },
  55.    name:'及时率', //图表名称
  56.    SerNameValue:{
  57.    position:'top',
  58.    color:'#3398DB', //
  59.    },
  60.   // color:'' //图表颜色
  61.    color:'#3398DB' //图表颜色
  62.   },
  63.   activeList:[
  64.    {
  65.     name:'本周',
  66.     is_active:true,
  67.    },
  68.    {
  69.     name:'本月',
  70.     is_active:false,
  71.    },
  72.    {
  73.     name:'本年',
  74.     is_active:false,
  75.    },
  76.   ]
  77.  }
  78.  },
  79.  mounted(){
  80.  this.widths = String((this.$refs.getwidth.$el.clientWidth) - 30) ; //画布宽度
  81.  this.MHeight =String((this.$refs.getwidth.$el.clientHeight) - 68) //画布高度
  82.  },
  83.  methods:{
  84.  onHide(){
  85.   const _this = this;
  86.   _this.model = 'none';
  87.   _this.$emit('isHide', _this.model,0)
  88.  },
  89.  Onactive(val,index){
  90.   const _this = this
  91.   let Alist = _this.activeList
  92.   let Length = _this.$refs.alist.length
  93.   let axis = _this.xAxis
  94.   let sumber = 0;
  95.   let arr = [];
  96.   for( let t = 0; t < Length; t++ ){
  97.    Alist[t].is_active = false;
  98.   } 
  99.   if( val.name == '本周' ){
  100.    sumber = 1
  101.   }else if ( val.name =='本月' ){
  102.    sumber = 1
  103.   }else if( val.name == '本年' ){
  104.    sumber = 1
  105.   }
  106.   Alist[index].is_active = true;
  107.    axis.x.data.map(item=>{
  108.    item += sumber 
  109.     arr.push(item)
  110.    })
  111.    axis.x.data = arr
  112.    _this.xAxis = axis
  113.    _this.activeList = Alist
  114.  }
  115.  }
  116. }
  117. </script>
  118. <style scoped>
  119. /* .week{
  120.  padding: 0 1%;
  121. } */
  122. .layui-card-header {
  123.  position: relative;
  124.  height: 42px;
  125.  line-height: 42px;
  126.  padding: 0 15px;
  127.  border-bottom: 1px solid #f6f6f6;
  128.  color: #333;
  129.  border-radius: 2px 2px 0 0;
  130.  font-size: 14px;
  131. }
  132. .common-height {
  133.  height: 280px;
  134. }
  135. .layui-card {
  136.  margin-bottom: 15px;
  137.  border-radius: 2px;
  138.  background-color: #fff;
  139.  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  140. }
  141. .layui-card-body {
  142.  position: relative;
  143.  padding: 10px 15px;
  144.  line-height: 24px;
  145. }
  146.    .layui-col-md20 {
  147.     width: 20%;
  148.    }
  149.    
  150.    .time-city-panel {
  151.     display: flex !important;
  152.     justify-content: space-between;
  153.     align-items: center;
  154.    }
  155.    
  156.    .time-city-panel img {
  157.     width: 73px !important;
  158.     height: 61px !important;
  159.     padding: 0 10px 10px !important;
  160.    }
  161.    
  162.    .time-city-panel .one-row,
  163.    .time-city-panel .two-row {
  164.     padding: 0 10px;
  165.    }
  166.    
  167.    .time-city-panel .one-row p:first-of-type {
  168.     font-size: 18px;
  169.     font-weight: bold;
  170.     padding: 0 0 10px;
  171.     text-align: left;
  172.    }
  173.    
  174.    .time-city-panel .two-row p:first-of-type {
  175.     padding: 0 0 10px;
  176.     color: #96acbc;
  177.     font-weight: bold;
  178.     line-height: 22px;
  179.    }
  180.    
  181.    .db_img {
  182.     width: 20px;
  183.     height: 22px;
  184.     margin: 0 5px;
  185.     vertical-align: middle;
  186.    }
  187.    
  188.    .panel-title .left-text {
  189.     padding-left: 10px;
  190.     border-left: 8px solid #239fe6;
  191.   font-size: 20px;
  192.     display: inline-block;
  193.     height: 30px;
  194.     line-height: 30px;
  195.     vertical-align: middle;
  196.    }
  197.    
  198.    .panel-title .right-text {
  199.     float: right;
  200.     color: #239fe6;
  201.     font-size: 14px;
  202.     margin-left: 15px;
  203.    }
  204.   
  205.    /*筒高度*/
  206.    
  207.    .common-height {
  208.     height: 280px;
  209.    }
  210.    
  211.    .text-overflow {
  212.     white-space: nowrap;
  213.     overflow: hidden;
  214.     text-overflow: ellipsis;
  215.    }
  216.    
  217.    .tjgx-panel .right-text span,
  218.    .ajtj-panel .right-text span {
  219.     display: inline-block;
  220.     color: #b0b0b0;
  221.    }
  222.    
  223.    .tjgx-panel .right-text span.acitive,
  224.    .ajtj-panel .right-text span.acitive {
  225.     color: #239fe6;
  226.    }
  227.    
  228.    #chart,
  229.    #ajtjChart {
  230.     width: 100%;
  231.     height: 90%;
  232.    }
  233.    
  234.    
  235. </style>

5：Echarts 组件

  1. <template>
  2.  <div>
  3.   <!-- style="min-height:280px;" -->
  4.   <div id="Echarts" :style="'width:'+Maxwidths+'px;min-height:'+MinHeight+'px'" ></div>
  5.   <!-- <div id="Echarts" v-if="Isgrid == false" :style="'width:'+Maxwidths+'px;height:'+MinHeight+'px'" ></div> -->
  6.  </div>
  7. </template>
  8. <script>
  9. import echarts from 'echarts';
  10. import { number } from 'echarts/lib/export';
  11. export default {
  12.  props:{
  13.   Isgrid:{
  14.    type:Boolean,
  15.    default:()=> true //默认显示柱状图
  16.   },
  17.   ss:{
  18.    type:Object,
  19.    default:()=>{}
  20.   },
  21.   Maxwidths:{
  22.    type:String, //整个容器的宽度
  23.    default:''
  24.   },
  25.   MinHeight:{
  26.    type:String, //最小高度
  27.    default:''
  28.   },
  29.   echartsColor:{ //图像的颜色
  30.    type:String,
  31.    default:''
  32.   },
  33.   legendWAndH:{ //图例的宽高位置等
  34.    type:Array,
  35.    default:()=>[15,15,18]
  36.   },
  37.   legendColor:{
  38.    type:String,
  39.    default:()=>'' //图例的颜色，如果不加则默认是图形颜色
  40.   },
  41.   xAxisData:{ //图形X轴的数据
  42.    type:Array,
  43.    default:()=>[]
  44.   },
  45.   YAxisName:{ //图形y轴的名称设置 数组或者百分比
  46.    type:Object,
  47.    default:()=>{}
  48.    // default:{name:'111',formatter: '{value}%'}
  49.   },
  50.   seriesData:{
  51.    type:Array, // 显示图像的数据 占据的多少
  52.    default:()=>[]
  53.   },
  54.   SerNameValue:{ //图形数据分析的占据的位置 left right top bottom 和显示的颜色
  55.    type:Object,
  56.    default:()=>{}
  57.    // default:{position:top,color: '#3398DB',formatter: '{c}%'}
  58.   },
  59.   echartsName:{ //图形的名称 
  60.    type:String,
  61.    default:()=>'柱状图'
  62.   },
  63.   XorYatter:{
  64.    type:Array,
  65.    default:()=>['{value}%','{c}%'] //默认为百分比 
  66.   },
  67.   //雷达图的参数
  68.   gWidth:{  //宽度默认为百分百
  69.    type:String,
  70.    default:()=>'100' 
  71.   },
  72.   gHeight:{
  73.    type:String,
  74.    default:()=> '90' //高度默认为90
  75.   },
  76.   gridValue:{  /// 雷达图的名称等等 格式[{text:11}]
  77.    type:Array,
  78.    default:()=>[]
  79.   },
  80.   gridraius:{   //圆圈大小
  81.    type:Number,
  82.    default:()=> 80 //默认为80 
  83.   },
  84.   gridTextStyle:{  //名称的默认颜色 text 
  85.    type:String,
  86.    default:()=>'#6bbcef'
  87.   },
  88.   symbolSize:{  // 圆点的大小 
  89.    type:Number,
  90.    default:()=> 10
  91.   },
  92.   SerValue:{
  93.    type:Array,
  94.    default:()=>[] //网格里面对应的数值
  95.   },
  96.   serVcolor:{
  97.    type:String,
  98.    default:()=> '#1bbdf8' //数值的默认颜色 SerValue的
  99.   },
  100.   lineStyleColor:{ 
  101.    type:String,
  102.    default:()=> '#1cbdf8' //连接线的颜色
  103.   },
  104.   itemStyleColor:{
  105.    type:String,
  106.    default:()=> '#1cbdf8' //连接圆点的默认颜色
  107.   },
  108.   BgColor:{
  109.    type:String,
  110.    default:()=> 'rgba(189, 230, 249, 0.5)'
  111.   }
  112.  },
  113.  data(){
  114.   return{
  115.    option:{
  116.     color:[], //图例颜色
  117.     legend:{
  118.      data:[], //图例名称
  119.      itemWidth:0, //图例的宽度
  120.      itemHeight:0, //图例的高度
  121.      right:0,
  122.      textStyle:{
  123.       color:''
  124.      }
  125.     },
  126.     xAxis:{
  127.      data:[] //x轴数据
  128.     },
  129.     yAxis:{
  130.      name:'', //名称
  131.      axisLabel:{
  132.       formatter:'' //是否显示百分比
  133.      }
  134.     },
  135.     series:[
  136.      {
  137.       name:'',
  138.       type:'bar', //类型
  139.       data:[], //X轴显示的数据
  140.       label:{
  141.        normal:{
  142.         show:true,
  143.         position:'',
  144.         color:'',
  145.         formatter:''
  146.        }
  147.       }
  148.      }
  149.     ]
  150.    },
  151.    
  152.    options:{
  153.     radar:[
  154.      {
  155.       indicator:[], // 显示的名称的字段只能是text ps:[{text:'aaa'}]
  156.       radius:0, //园角
  157.       name:{
  158.        textStyle:{
  159.         color:'' //颜色
  160.        }
  161.       },
  162.       symbolSize:0, //圆点大小
  163.      }
  164.     ],
  165.     series:[
  166.      {
  167.       type:'radar',
  168.       data:[{
  169.        value:[], //对应的数据
  170.        label:{
  171.         normal:{
  172.          show:true,
  173.          color:'', //选中的时候颜色
  174.          formatter:(params)=>{
  175.           return params.value;  
  176.          }
  177.         }
  178.        },
  179.        //连接线颜色
  180.        lineStyle:{
  181.         color:'',
  182.        },
  183.        // 连接圆点颜色
  184.        itemStyle:{
  185.         color:''
  186.        },
  187.        // 图表背景网格的颜色
  188.        areaStyle:{
  189.         normal:{
  190.          opacity:0.9,
  191.          color:'' 
  192.         }
  193.        }
  194.       }]
  195.      }
  196.     ]
  197.    }
  198.   }
  199.  },
  200.  created(){
  201.   const _this = this;
  202.   console.log(_this.Isgrid)
  203.   console.log(this.ECharts)
  204.   if( _this.Isgrid ){
  205.    _this.onloads() //初始化数据
  206.   }else{
  207.    _this.isInitGrid()
  208.   }
  209.  },
  210.  mounted(){
  211.   const _this = this;
  212.   if(_this.ss){
  213.    _this.option = {}
  214.    _this.option = _this.ss;
  215.   }
  216.   setTimeout(()=>{
  217.    _this.$nextTick(()=>{
  218.     let Echarts = echarts.init(document.getElementById('Echarts'))
  219.      Echarts.setOption(_this.option,true)
  220.    })
  221.   },500)
  222.  },
  223.  watch:{
  224.   seriesData(val){
  225.    this.seriesData = val
  226.    this.onloads(true)
  227.   } 
  228.  },
  229.  methods:{
  230.   onloads(is){
  231.    const _this = this;
  232.    let op = _this.option  
  233.    op.color = [_this.echartsColor]
  234.    op.legend.data = [_this.echartsName]
  235.    op.legend.itemWidth =_this.legendWAndH[0]
  236.    op.legend.itemHeight =_this.legendWAndH[1]
  237.    op.legend.right =_this.legendWAndH[2]
  238.    op.legend.textStyle.color =_this.legendColor == '' ? _this.echartsColor:''
  239.    op.xAxis.data = _this.xAxisData
  240.    op.yAxis.name = _this.echartsName
  241.    op.yAxis.axisLabel.formatter = _this.XorYatter[0]
  242.    op.series[0].data = _this.seriesData
  243.    op.series[0].name = _this.echartsName
  244.    op.series[0].label.normal.position = _this.SerNameValue.position
  245.    op.series[0].label.normal.formatter = _this.XorYatter[1]
  246.    op.series[0].label.normal.color = _this.SerNameValue.color == '' ? _this.echartsColor:_this.SerNameValue.color
  247.    _this.option = op;
  248.    if( is ){
  249.     _this.$nextTick(()=>{
  250.     let Echarts = echarts.init(document.getElementById('Echarts'))
  251.      Echarts.setOption(op,true)
  252.    })
  253.    }
  254.  
  255.   },
  256.   isInitGrid(){
  257.    const _this = this;
  258.    let g = _this.options;
  259.    g.radar[0].indicator = _this.gridValue
  260.    g.radar[0].radius = _this.gridraius
  261.    g.radar[0].name.textStyle.color = _this.gridTextStyle
  262.    g.radar[0].symbolSize = _this.symbolSize
  263.    g.series[0].data[0].value = _this.SerValue
  264.    g.series[0].data[0].label.normal.color = _this.serVcolor
  265.    g.series[0].data[0].lineStyle.color = _this.lineStyleColor
  266.    g.series[0].data[0].itemStyle.color = _this.itemStyleColor
  267.    g.series[0].data[0].areaStyle.normal.color = _this.BgColor
  268.   }
  269.  }
  270. }
  271. </script>

6：效果图

以上就是vue中使用echarts的步骤的详细内容，更多关于vue 使用echarts的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Echarts热门文章

  • Python+Pyecharts实现散点图的绘制
  • vue+echarts5实现中国地图的示例代码
  • echarts中几种渐变方式的具体实现方式
  • Echart Bar双柱状图样式最全详解
  • vue echarts实现柱状图动态展示
  • 如何利用echarts画雷达图和折柱混合
  • Echarts Bar横向柱状图实例代码
  • ECharts图表动态修改series显示隐藏
  • 【Dotnet 工具箱】跨平台图表库 LiveCharts2
  • vue2?利用echarts?单独绘制省份的步骤

    • Echarts推荐文章

  • Echarts设置饼状图保证你看的明明白白
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
  • echarts X轴类目名太长时隐藏，hover时显示全部
  • vue3+ts打开echarts的正确方式
  • echarts设置多条折线不是你想的那样简单
  • 将ECharts图表插入到Word文档中
  • echarts中几种渐变方式的具体实现方式
  • vue中echarts关系图动态增删节点以及连线方式
  • 如何利用echarts画雷达图和折柱混合
  • pyecharts的Tab和Legend布局详情

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号