引入 ECharts绘制一个简单的图表

本文将指导读者如何利用ECharts库快速入门,绘制出一个简单但直观的图表,涵盖基本配置与数据绑定过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。-->
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。-->

<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

### 在 Vue 项目中使用 ECharts 绘制百分比柱状图 为了在 Vue 项目中实现一个基于 ECharts 的百分比柱状图,可以遵循如下结构化的方式: #### 准备工作 确保已经安装了 `echarts` 和 `vue-echarts` 库。可以通过 npm 或 yarn 来安装这些依赖包。 ```bash npm install echarts vue-echarts --save ``` 或者 ```bash yarn add echarts vue-echarts ``` #### 创建图表容器 创建一个用于容纳图表的 DOM 元素,并为其设定固定的宽度和高度[^1]。 ```html <div id="main" style="width: 600px;height:400px;"></div> ``` #### 初始化 ECharts 实例并配置选项 利用 `echarts.init()` 方法来初始化一个新的 ECharts 图表实例,并调用 `setOption()` 设置图表的具体样式与数据源。 对于百分比柱状图而言,重要的是调整系列项下的 `type`, `data` 属性以及计算每根柱子所占比例的数据处理逻辑。下面是一个具体的例子说明如何构建这样的图表: ```javascript // 假设这是要展示的不同类别的原始数值数组 const rawData = [ {name:'类别A', value:30}, {name:'类别B', value:70} ]; let totalValue = rawData.reduce((acc, cur) => acc + cur.value, 0); // 将原始值转换成百分比形式 const processedData = rawData.map(item => ({ name:item.name, value:(item.value / totalValue * 100).toFixed(2), })); option = { tooltip : { trigger: 'axis', axisPointer : { // 使用轴指示器,阴影跟随鼠标指针移动 type : 'shadow' }, formatter: function (params){ let res=params[0].seriesName+'<br/>'; params.forEach(function(param,idx){ res+=`${param.marker}${param.seriesName} ${param.name}: ${param.value}%`; if(idx!=params.length-1){res+='<br/>';} }); return res; } }, xAxis: { type: 'category', data: ['类别'] }, yAxis: [{ type: 'value' }], series: [{ name:'占比', type:'bar', barWidth: '50%', label:{ show:true, position:"inside", formatter:function(params){ return `${params.data}%` } }, itemStyle: { color: '#c23531' }, data:[processedData] }] }; ``` 注意这里对原始数据进行了预处理,将其转化为表示各部分相对于整体的比例的形式。同时设置了工具提示框 (`tooltip`) 显示格式以便更好地理解每个条目的具体含义。 #### 注册组件并在模板内渲染 最后一步是在 Vue 中注册这个自定义的地图、柱状图或饼状图组件,并且可以在单文件组件(SFCs)里轻松地嵌入到页面布局当中[^2]。 ```html <!-- MyChart.vue --> <template> <v-chart class="my-chart" autoresize :option="chartOptions"/> </template> <script> import VChart from "vue-echarts"; export default { components: { VChart }, props: ["chartOptions"] }; </script> <style scoped> .my-chart { height: 400px; } </style> ``` 通过上述步骤即可实现在 Vue.js 环境下集成 ECharts 并制作出美观实用的百分比柱状图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

带刀走江湖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值