EChart 学习笔记二：EChart 相关语法以及属性

最新推荐文章于 2023-10-10 15:34:52 发布

前端菜鸟来报道

最新推荐文章于 2023-10-10 15:34:52 发布

阅读量540

点赞数

分类专栏： EChart 文章标签： html

本文链接：https://blog.csdn.net/WQearl/article/details/106627055

版权

EChart 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

常用属性在代码中可见。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!--步骤一： 引入 echarts.js 文件-->
    <script src="../EChart/echarts.js"></script>
</head>

<body>
    <!-- 步骤二：定义一个容器，用于绘制图表 -->
    <div id="chart" style="width: 500px;height:500px;"></div>

    <!-- 步骤三：配置图表相关属性 -->
    <script type="text/javascript">
        var Chart = echarts.init(document.getElementById('chart'));//获取ID为chart的组件，再这里绘制图表
        //option 中的都是图表的相关属性
        var option = {
            //1.图表额标题
            title: {
                text: 'My Chart Example'
            },
            //2.图表的图例
            legend: {
                //这一种是可以自己设置图例样式
                // data: [{
                //     name: '科目',
                //     // 强制设置图形为圆。
                //     icon: 'circle',
                //     // 设置文本为红色
                //     textStyle: {
                //         color: 'red'
                //     }
                // }]
                x: '75%', //设置图例X轴位置
                y: '10px',//设置Y轴位置
                orient: 'Vertical', //图例列表的布局朝向。
                data: ['科目']   //这一种是简单模式
            },
            //3.提示信息（鼠标放到图表上时会显示提示信息）
            tooltip: {
                show: true
            },
            //4.要再X轴显示的项
            xAxis: {
                data: ["语文", "数学", "英语", "生物", "地理", "化学"]
            },
            //5.要再y轴显示的项
            yAxis: {},
            //6.设置系列列表
            series: [{
                name: '科目', //系列名称
                type: 'bar',//这个系例图表的类型
                color: ['MediumPurple'],//设置颜色，这个属于调色盘，放到系列中，只针对本系列设置颜色，如果放到option下，就是对所有的系列进行这个调色盘设置。
                data: [90, 80, 100, 70, 88, 93]  //系列中的数据
            }]
        };

        //7.设置刚指定的配置项和数据显示图表
        Chart.setOption(option);
    </script>
</body>

</html>

上面代码效果如图显示：

注：

series中的type类型有：

type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列

本学习笔记参考：https://www.runoob.com/echarts/echarts-setup.html

前端菜鸟来报道

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EChart 学习笔记二：EChart 相关语法以及属性

常用属性在代码中可见。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title>  <script src="../EChart/echarts.js"></script></head>
复制链接

扫一扫