关于echarts

最新推荐文章于 2022-08-11 16:28:31 发布

紫莹馨羽

最新推荐文章于 2022-08-11 16:28:31 发布

阅读量199

点赞数

文章标签：关于echarts

本文链接：https://blog.youkuaiyun.com/weixin_44389132/article/details/88927617

版权

自从使用了echarts.js插件就不想用canvas了，有了插件就简单方便多了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script type="text/javascript" src='echarts.js'></script>
</head>
<body>
    <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var options={
        //定义一个标题
        title:{
            text:'测试成绩'
        },
        //柱形代表：销量
        legend:{
            data:['销量']
        },
        //X轴设置
        xAxis:{
            data:['60分','70分','80分','90分','100分']
        },
        yAxis:{
        },
        //name=legend.data的时候才能显示图例
        series:[{
            name:'销量',
            type:'bar',
            data:['12','32','45','21','1']
        }]

    };
    myChart.setOption(options);
</script>
</html>

注意事项：这里案例是最基础，但是里面还是有一个知识点来的，就是在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数，如果是不想设置的话也要初始化可以将其设置为空JSON就可以了，要不然会出项报错，同时要保证在echarts.init之前的对象是有宽高的，要不然也会出现错误.
事件
在 ECharts 中主要通过 on 方法添加事件处理函数。ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是调用 dispatchAction 后触发的事件。

myChart.on('click', function (params) {
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

扇形图

<!--热门品牌销售占比-->
            <div id="last" class="picTable"></div>

var binTu=function () {
// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('last'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '品牌销售占比',
            subtext: '2017年10月',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            /*series.name  a  */
            /*data.name  b */
            /*data.value  c */
            /*占比  d */
            formatter: "{series.name } <br/>{data.name} : {data.value} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['李宁','耐克','阿迪','迋威','回力']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'李宁'},
                    {value:310, name:'耐克'},
                    {value:234, name:'阿迪'},
                    {value:135, name:'迋威'},
                    {value:1548, name:'回力'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

//重新赋值
    /*option.xAxis.data=xData;
    option.series[0].data=yData;*/
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);