• 安装
npm install echarts --save
  • 引入
import * as echarts from 'echarts';

（一般项目中大致会用到三种图表：柱形图、折线图、饼图。所以本文在举例说明中主要以这三种图表为例。）

  • 内容格式器formatter

  •  使用tips

echarts初始化时，必须给其绑定的元素设置宽高，否则echarts会初始化失败。

  • 举例
<template>
    <div>
        <div ref="barChart" :style="{ width: '400px', height: '300px' }"></div>
        <div ref="pieChart" :style="{width:'500px',height:'300px'}"></div>
    </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const barChart = ref<HTMLElement>(); 
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
    myChart1.value = echarts.init(barChart.value!);
    myChart1.value.setOption({
        title: {
            text: '学习输出',
            x: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: ['输出量', '输入量'],
            orient: 'vertical',
            right: 60,
            top: 20
        },
        xAxis: {
            data: ['六月', '七月', '八月', '九月', '十月']
        },
        yAxis: {},
        color: ['#c38bef', '#6dbcf7'],
        series: [
            {
                name: '输出量',
                type: 'line',
                data: [2, 9, 6, 3, 1],
                smooth: true,
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '输入量',
                type: 'bar',
                data: [9, 18, 12, 9, 6],
                barWidth: '20',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    });
}
//绘制饼图
const pieChart = ref<HTMLElement>(); 
const myChart2 = ref<any>();
function initPieEcharts(){
    myChart2.value=echarts.init(pieChart.value!)
    myChart2.value.setOption({
        title:{
            text:'文章分类',
            x:'center'
        },
        tooltip:{
            trigger:'item',
            formatter:'{b}:{c}({d}%)'
        },
        legend:{
            type:'scroll',
            orient:'vertical',
            left:0,
            top:30,
            height:150,
            data:['html','css','javascript','typescript','vue2','vue3','react','angular','uniapp','taro','vite','webpack','node','others']
        },
        color:['#61adf2','#56dae8','#efa49e','#7ea1ed','#5ae05a','#f2d2a2','#5881e8','#63d6c0','#edc29f','#5b97d3','#3eceb3','#6a96ed','#426ed1','#65d18b'],
        series:[
            {
                name:'文章分类数量',
                type:'pie',
                radius:'30%',
                center:['60%','50%'],
                data:[
                    {name:'html',value:10},
                    {name:'css',value:12},
                    {name:'javascript',value:20},
                    {name:'typescript',value:15},
                    {name:'vue2',value:13},
                    {name:'vue3',value:12},
                    {name:'react',value:3},
                    {name:'angular',value:2},
                    {name:'uniapp',value:12},
                    {name:'taro',value:5},
                    {name:'vite',value:2},
                    {name:'webpack',value:3},
                    {name:'node',value:9},
                    {name:'others',value:10},
                ],
                emphasis:{
                    itemStyle:{
                        shadowBlur:10,
                        shadowOffsetX:0,
                        shadowColor:'rgba(0,0,0,0.5)'
                    }
                },
                label:{
                    show:true,
                    position:'outside',
                    formatter:'{b}:{c}({d}%)'
                }
            }
        ]
    })
}
onMounted(() => {
    initBarEcharts();
    initPieEcharts()
});
</script>
  • 界面展示

 

原文地址：http://www.cnblogs.com/nicoz/p/16881325.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性