echart-line数据纵向

最新推荐文章于 2024-06-08 21:17:27 发布

小时_sqe

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量586

点赞数

分类专栏： echart 文章标签： echart vue 组件

本文链接：https://blog.csdn.net/weixin_38355349/article/details/99871115

版权

本文介绍如何利用Echarts库在Vue项目中创建数据关系图表，展示了一个接近完成的示例，仅缺少背景设置。

摘要由CSDN通过智能技术生成

今天得到个需求让画这样一个数据关系图：
在这里插入图片描述
然后琢磨了一下：

<template>
<div class="echart_div">
  <div :id="elId" class="echart_con"></div>
  <ul class="lenged">
    <li>
      <i style="border-color:#5B9BD5"></i>
      <span>Latest</span>
    </li>
     <li>
      <i style="border-color:#08B356"></i>
      <span>Min</span>
    </li>
     <li>
      <i style="border-color:#FF0000"></i>
      <span>Max</span>
    </li>
     <li>
      <i style="border-color:#7F7F7F"></i>
      <span>Average</span>
    </li>
  </ul>
</div>
  
</template>
<script>
 //引入uuid文件
  import uuidv1 from 'uuid/v1' 
  export default {
    name: "radar-chart",
    data () {
      return {
        elId: 'echartid',
        myChart:null
      }
    },
    props: {
      data: {
        type: Object,
        default () {
          return {
            seriesData:[{ 
              name:"Jun-19",
              data:[{
                value:['Jun-19',15],