vue 项目中引入echarts并实现环形图

最新推荐文章于 2024-11-04 21:20:56 发布

zhanwang_9050

最新推荐文章于 2024-11-04 21:20:56 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/zhanwang_9050/article/details/94730544

版权

本文介绍了如何在Vue项目中引入Echarts库并创建环形图，包括安装Echarts，注册组件，以及在组件中使用Echarts的步骤。同时强调了环形图内外圈颜色对应的重要性，并提到数据处理的注意事项。

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

1、安装命令：npm install echarts -S

2、在main.js中引入，

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
Vue.component('v-chart', ECharts)

3、在组件中使用

<template>
  <div >
    <div style="width: 100%;height: 400px;" id="container"></div>
  </div>
</template>
<script>
export default {
    name: "circleCharts",
    data() {
      return {
        dataList:[
        {
            "value": 4830,
            "name": "etiology",
            "itemStyle": {
                "color": "rgb(125,230,190)"
            }
        },
        {
            "value": 3819,
            "name": "physiopathology",
            "itemStyle": {
                "color": "rgb(109,204,167)"
            }
        },
        {
            "value": 955,
            "name": "epidemiology",
            "itemStyle": {
                "color": "rgb(87,187,149)"
            }
        },
        {
            "value": 6548,
            "name": "drug therapy",
            "itemStyle": {
                "color": "rgb(52,146,160)"
            }
        },
        {
            "value": 4531,
            "name": "other therapy",
            "itemStyle": {
                "color": "rgb(91,187,202)"
            }
        },
        {
            "value": 1438,
            "name": "non drug therapy",
            "itemStyle": {