echarts 饼图默认高亮某一项画圆富文本

最新推荐文章于 2024-03-24 15:57:41 发布

痞子泰

最新推荐文章于 2024-03-24 15:57:41 发布

阅读量774

点赞数

分类专栏： HTML javascript 文章标签： javascript css vue.js html5

本文链接：https://blog.csdn.net/u011497228/article/details/104446442

版权

文章目录

背景
开发
总结

背景

完成下面这幅图，默认高亮第一项，可交互；
使用vue + echarts完成
在这里插入图片描述

开发

搭建环境-vue

使用 vue-cli 搭建vue基本环境，然后按照echarts库，如下：

yarn add echarts

引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

编码

<template>
  <div class="hello">
    <div id="pieChart" ref="echart" style="width: 600px;height:400px;"></div>
    <ul class="list-container">
      <li class="each-item" v-for="(item,index) in data" :key="index"
      @click="handleClick(index)">
        <div class="line" :style="{backgroundColor: item.color}"></div>
        <div class="desc">
          <p class="name">{
   {
   item.name}}</p>
          <p class="num">{
   {
   item.value}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      myChart: null,
      /**
       * name 名称
       * value 数据
       * color 饼图和展示数据的竖条颜色，这是一一对应的
       */
      data: [
        {
   
          name: "苹果",
          value: 28,
          color: "#fc7e3f"
        },
        {
   
          name: "香蕉",
          value: 26,
          color: "#f5d878"
        },
        {
   
          name: "菠萝",
          value: 25,
          color