echarts使用指南

一、echarts是什么？

二、基础使用步骤

下载

使用步骤

三、属性详解

option 选项

 type 类型

四、特别设置

 颜色样式控制

线

柱状图

渐变颜色

堆叠图

富文本

五、地图

---

前言

在前端工作中，加图表是一个非常常见的任务，今天分享的就是echarts的学习笔记。

---

一、echarts是什么？

一个基于 JavaScript 的开源可视化图表库

百度开发团队制作，开源交给apache基金管理

同类型产品：Highcharts、HighchartsD3

二、基础使用步骤

1.下载

当前学习中，是导入了官网下载的源文件，如需要可去官网下载👇

Apache ECharts 一个基于 JavaScript 的开源可视化图表库https://echarts.apache.org/zh/download.html

2.使用步骤

①、初始化

 var echart = echarts.init(dom节点);

②、定义选项option

   var option = {
        title: {
            text: "第一个表格"
        },
        color: ["#e01f54", "#001852", "#f5e8c8",],
        legend: {
            data: ["成绩"]
        },
        tooltip: {},
        xAxis: {
            data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
        },
        yAxis: {},
        series: [{
            type: "bar",
            data: [90, 80, 100, 60, 80],
            name: "成绩"
        }]
    }

③、更新选项

echart.setOption(option);

三、属性详解

option 选项

title 标题

 text:"标题文本"

color 调色盘

color: ["#e01f54", "#001852", "#f5e8c8", "#b8d2c7",],

legend 图例

{data:["name1","name2"]}

注意：与series中图的name保持一致

tooltip 提示

xAxis x轴线

{data:["x1","x2",...]}

yAxis y轴线

{data:["y1","y2",...]}

series 系列数据

[
    {type: "bar",data: [...],name: "..."},
    {type: "line",data: [...],name: "..."},
    {type: "pie",data: [...],name: "..."},
]

 type 类型

bar 柱状图

{
name:"名称",
type:"bar",
data:[10,{value:10}],
itemStyle:{color:xxx}//图的颜色
}

line 线

{
   name:“名称”，
   type:"line",
   smooth:true, //平滑
   areaStyle:{面的样式},
   lineStyle：{线的样式}
}

pie 饼状图

{
    name:"名称",
    type:"pie",
    radius:["10%","50%"],//内圈，外圈
    data:[{name:"n1",value:40},{name:"n2",value:60}],
    left:"距左侧距离",
    top:"距顶部距离"
}

以上为常见的属性，更详细的配置信息请参考👇

echarts配置项手册https://echarts.apache.org/zh/option.html#title

四、特别设置

 颜色样式控制

主题
    light 亮  dark 暗

init(dom节点,"light"/"dark") 

 不写则为默认颜色

自定义主题
echarts 主题编辑器https://echarts.apache.org/zh/theme-builder.html官网配置好后，下载js 导入 引用

<script src="./js/shine.js"></script>
init(dom,"shine")

调色板
在option中，定义color数组

itemStyle
具体数据:在某个图的data中给某个数据设置

data: [90, 80, 100, {
    value: 60,
    itemStyle: {
    color: "#2e4783"
    }
}, 80],

系列数据：给某个图设置
 写法1：设置默认颜色，选中颜色默认比设置的颜色亮一些

itemStyle: {
    color: "#a4d8c2",
}

写法2：详细设置

itemStyle: {
    normal: {//默认样式
        color: "#a4d8c2"
    },
    emphasis: {//强调样式
        color: "#d3758f"
    }
}

线

lineStyle: {
    width: 10,//10像素
    cap: "round"//端点平滑
}

柱状图

itemStyle:{borderRadius:[100,100,100,100],}
//圆角，左上，右上 ，右下，左下

渐变颜色

 渐变需要先定义渐变颜色，引用时直接引用定义的变量名

    var mycolor = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(80, 15, 205, 0.7)' // 0% 处的颜色
        }, {
            offset: .7,
            color: 'rgba(29, 249, 231, 0.1)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    }

堆叠图

 在series的数据中，添加stack: true属性，即可实现堆叠效果

{name:"ui",data:[],stack:true},
{name:"web",data:[],stack:true}

富文本

 主要是label属性

eg:给“中国”big样式

label: {
    show: true,
    position: "center",
    rich:{big:{fontSize:"24px"}}
    formatter:"{big|中国}"
}

rich： 定义样式

formatter ：字符串的模板

• {a} 系列名称
• {b} 名称
• {c} 值
• {d} 百分百

position：定位

• "center" 中间
• "insideRight" 内部右侧

五、地图

{name:"china",type:"map",mapType:"china",data:[{name:"",value:100}]}

 getMap()

fetch(url)
.then(res=>res.json())
.then(res=>{
    echarts.registerMap("china",res);
    option.series[0].mapType("china");
    echart.setOption(option);
})

 重要↓

echarts.registerMap(name,res);

---