1. A histogram

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A histogram</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.js"></script>
</head>
<body>
<! -- Prepare a Dom with size (width and height) for ECharts
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
    // Initializes the echarts instance based on the prepared DOM
    var myChart = echarts.init(document.getElementById('main'));

    // Specify the chart configuration items and data
    var option = {
        title: {
            text: 'Bar chart'
        },
        tooltip: {},
        legend: {
            data: ['Familiarity']},xAxis: {
            data: ["javascript"."css3"."html5"."vue"."webpack"."jQuery"]},yAxis: {},
        series: [{
            name: 'Familiarity'.type: 'bar'.data: [80.90.88.70.78.80]]}};// Display the chart using the configuration items and data you just specified.
    myChart.setOption(option);
</script>
</body>
</html>
Copy the code


\

\

\

2. The pie chart

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.js"></script>
</head>
<body>
<! -- Prepare a Dom with size (width and height) for ECharts
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
    // Initializes the echarts instance based on the prepared DOM
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title : {
            text: 'Source of user visits to a site'.subtext: 'Pure fiction'.x:'center'
        },
        tooltip : {
            trigger: 'item'.formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical'.left: 'left'.data: ['Direct access'.'Email marketing'.'Affiliate advertising'.'Video advertising'.'Search engines']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'60%'].data:[
                    {value:335.name:'Direct access'},
                    {value:310.name:'Email marketing'},
                    {value:234.name:'Affiliate advertising'},
                    {value:135.name:'Video advertising'},
                    {value:1548.name:'Search engines'}].itemStyle: {
                    emphasis: {
                        shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}}]};// Display the chart using the configuration items and data you just specified.
    myChart.setOption(option);
</script>
</body>
</html>
Copy the code


\

3. Line charts

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.js"></script>
</head>
<body>
<! -- Prepare a Dom with size (width and height) for ECharts
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
    // Initializes the echarts instance based on the prepared DOM
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title: {
            text: 'Temperature changes in the coming Week'.subtext: 'Pure fiction'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Maximum temperature'.'Minimum temperature']},toolbox: {
            show: true.feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line'.'bar']},
                restore: {},
                saveAsImage: {}}}.xAxis:  {
            type: 'category'.boundaryGap: false.data: ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday']},yAxis: {
            type: 'value'.axisLabel: {
                formatter: '{value} ° C'}},series: [{name:'Maximum temperature'.type:'line'.data: [11.11.15.13.12.13.10].markPoint: {
                    data: [{type: 'max'.name: 'maximum'},
                        {type: 'min'.name: 'minimum'}},markLine: {
                    data: [{type: 'average'.name: 'Average'}]}}, {name:'Minimum temperature'.type:'line'.data: [1, -2.2.5.3.2.0].markPoint: {
                    data: [{name: 'Weekly minimum'.value: -2.xAxis: 1.yAxis: -1.5}},markLine: {
                    data: [{type: 'average'.name: 'Average'[{},symbol: 'none'.x: '90%'.yAxis: 'max'
                        }, {
                            symbol: 'circle'.label: {
                                normal: {
                                    position: 'start'.formatter: 'maximum'}},type: 'max'.name: 'Highest point'}]]}}]};// Display the chart using the configuration items and data you just specified.
    myChart.setOption(option);
</script>
</body>
</html>
Copy the code


\

\