首页 前端知识 echarts的使用

echarts的使用

2024-06-06 00:06:00 前端知识 前端哥 90 846 我要收藏

下载echarts的js文件

官网点击在线定制         下载 - Apache ECharts

 选择版本和功能

然后点击下载,等几分钟后就可以下载

 

 然后导入js文件

<script src="../../js/echarts.min.js"></script>

初始化vue项目框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" initial-scare="0.9">
    <title>Title</title>
    <script src="../../js/axios-0.18.0.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../elementui/index.js"></script>
    <script src="../../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../../elementui/index.css">

</head>
<body>

<div id="app">



</div>




<script>
    var app=new Vue({
        el:"#app",
        mounted(){
          
        },
        data(){
            return{

            }
        },
        methods:{

        }
    })
</script>

</body>
</html>

为 ECharts 准备一个定义了高宽的 DOM 容器

<div id="main" style="width: 300px;height:300px" ></div>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

  // 扇形图1
            var myChart = echarts.init(document.getElementById('main'));

            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            myChart.setOption(option);

如果想达到如下效果,在同一行中

 使用elementUI布局组件

 <el-row>
        <el-col :span="5"><div id="main" style="width: 300px;height:300px" ></div></el-col>
        <el-col :span="5"><div id="main2" style="width: 300px;height:300px" ></div></el-col>
    </el-row>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" initial-scare="0.9">
    <title>Title</title>
    <script src="../../js/axios-0.18.0.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../elementui/index.js"></script>
    <script src="../../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../../elementui/index.css">

</head>
<body>

<div id="app">
    <el-row>
        <el-col :span="5"><div id="main" style="width: 300px;height:300px" ></div></el-col>
        <el-col :span="5"><div id="main2" style="width: 300px;height:300px" ></div></el-col>
    </el-row>


</div>




<script>
    var app=new Vue({
        el:"#app",
        mounted(){
            // 扇形图1
            var myChart = echarts.init(document.getElementById('main'));

            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            myChart.setOption(option);
            //扇形图2
            var myChart2 = echarts.init(document.getElementById('main2'));

            var option2 = {


                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);
        },
        data(){
            return{

            }
        },
        methods:{

        }
    })
</script>

</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11000.html
标签
评论
发布的文章

js 指定光标位置

2024-06-10 23:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!