Visual Studio Code

23_123456

已于 2024-03-14 19:50:38 修改

阅读量370

点赞数 9

文章标签： vscode ide 编辑器

于 2024-03-04 11:33:33 首次发布

本文链接：https://blog.csdn.net/2202_75544053/article/details/136442707

版权

下载地址：Download Visual Studio Code - Mac, Linux, Windows

安装步骤：

安装位置可修改

安装完成打开

扩展语言、Java、html、open

语言下载之后点击右下角Change Language and Restart更新语言并重启软件

打开eclipse

把这两个文件移动到js文件夹

打开vis新建工作区

//1案例
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件
                backgroundColor: 'yellow',  //设置主标题的背景颜色
                text: '某大学三大学院的专业分布',  //设置主标题的文字
                textStyle: {  //设置主标题文字样式
                    color: 'green',  //设置主标题文字的颜色
                    fontFamily: '黑体',  //设置主标题文字的字体
                    fontSize: 28  //设置主标题文字的大小
                },
                x: 'center'  //设置主标题左右居中
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',  //设置提示框的触发方式
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置图例垂直方向
                x: 32,  //设置图例的水平方向
                y: 74,  //设置图例的垂直方向
                data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术',
                    '2-云计算技术与应用', '3-投资与理财', '3-财务管理']
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱是否显示
                x: 555,  //设置工具箱的水平位置
                y: 74,  //设置工具箱的垂直位置
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: false,
            series: [
                {
                    name: '专业名称',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['10%', '30%'],
 
                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1200, name: '计算机学院' },
                        { value: 900, name: '大数据学院' },
                        { value: 600, name: '财金学院', selected: true }  //初始时为选中状态
                    ]
                },
                {
                    name: '专业名称',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['40%', '55%'],
                    data: [
                        { value: 800, name: '1-软件技术' },
                        { value: 400, name: '1-移动应用开发' },
                        { value: 500, name: '2-大数据技术与应用' },
                        { value: 200, name: '2-移动互联应用技术' },
                        { value: 200, name: '2-云计算技术与应用' },
                        { value: 400, name: '3-投资与理财' },
                        { value: 200, name: '3-财务管理' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

23_123456

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Visual Studio Code

下载地址：Download Visual Studio Code - Mac, Linux, Windows 安装步骤：安装位置可修改安装完成打开扩展语言、Java、html、open语言下载之后点击右下角Change Language and Restart更新语言并重启软件打开eclipse把这两个文件移动到js文件夹打开vis新建工作区
复制链接

扫一扫