Echarts-单柱状图组件

最新推荐文章于 2024-06-25 15:34:07 发布

乾卦三爻

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量492

点赞数

分类专栏： echarts vue 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_46325225/article/details/127525670

版权

本文详细介绍了如何使用Echarts库创建单柱状图，包括配置项设置、数据绑定和图表渲染过程。通过实例代码解析，帮助读者掌握在JavaScript前端开发中利用Echarts绘制专业柱状图的方法。

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

在这里插入图片描述

<template>
    <div class="interactionTemplate">
        <div class="echart" id="mychart"></div>
        <div class="content">
            <div class="listBox" :style="{height:tabHeight}" :class="{'ani':dataList.length>3}">
                <div>
                    <div class="listItem" v-for="(item,index) in dataList" :key="index">
                        <div>
                            <span>{
   {
   item.date}}</span>
                            <span>{
   {
   item.date1}}</span>
                        </div>
                        <div>{
   {
   item.title}}</div>
                        <div>{
   {
   item.time}}</div>
                    </div>
                </div>
                <div v-if="dataList.length>3">
                    <div class="listItem" v-for="(item,index) in dataList" :key="index">
                        <div>
                            <span>{
   {
   item.date}}</span>
                            <span>{
   {
   item.date1}}</span>
                        </div>
                        <div>{
   {
   item.title}}</div>
                        <div>{
   {
   item.time}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
   
<script>
import * as echarts from "echarts";

export default {
   
    data() {
   
        return {
   
            dataList: