柱状图，扇形图以及折线图--echarts图应用

最新推荐文章于 2025-04-25 15:39:06 发布

L.B.O.i

最新推荐文章于 2025-04-25 15:39:06 发布

阅读量199

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/Z_L_i/article/details/128675979

版权

本文介绍了如何在前端项目中使用Echarts库创建柱状图、扇形图和折线图。通过引入Echarts库并设置相关配置，展示了如何在Vue组件中实现这三种常见图表的展示。代码示例中包含了具体的样式设置，以确保图表在页面上的布局和显示效果。

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

有标签不是到为什么显示不了，去掉了，大家可以参考嗷，有改善的地方希望大家指教！！！
template

<div>

    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <div class="block">
                    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions"
                        class="pickerOne">
                    </el-date-picker>
                    定义echarts图高度（容器）
                <div id="threeWeeks"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <div class="block">
                    <el-date-picker v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions"
                        class="pickerOne">
                    </el-date-picker>
                </div>
                <div id="sevenData"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <div class="block">
                    <el-date-picker v-model="value3" type="date" placeholder="选择日期" :picker-options="pickerOptions"
                        class="pickerOne">
                    </el-date-picker>
                </div>
                <div id="yearData"></div>
            </div>
        </el-col>
    </el-row>
</div>

/template
进行引入
script
import * as echarts from “echarts”;

export default {

name: 'businessStatistics',

data() {
    return {
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                    picker.$emit('pick', new Date());
                }

最低0.47元/天解锁文章