1、2系统平台--柱状图，折线图和饼图demo

最新推荐文章于 2021-11-05 18:21:24 发布
最新推荐文章于 2021-11-05 18:21:24 发布
阅读量178 收藏
点赞数
分类专栏： 1 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fetten1992/article/details/105270517
版权

1、柱状图
1、1普通柱状图，给阴影部分添加点击事件
在这里插入图片描述

<template>
    <div id="bar1"></div>
</template>
<script>
import echarts from "echarts";
import api from "../../api/sendRequest";
export default {
    name: "charts",
    data() {
        return {
            barData:{
                "code": 1,                      //状态码
                "msg": "查看成功！",            //状态信息                                   
                "data": {                       //内容
                    "type": "bar",             //类型
                    "title": "cpu使用率",       //标题               
                    "xUnit": "小时",            //x轴单位
                    "yUnit": "%",               //y轴单位
                    "xAxis": ["10","11","12","13","14","15","16","17","18","19","20","21","22","23"],//x轴内容
                    "yAxis": [9.64,6.9,6.76,6.17,5.49,7.42,9.37,8.62,15.99,14.92,8.31,4.36,4.52,4.52]//y轴内容
                }
            },
            myChart:null,
            searchForm:{},
            barX1:[],
            barY1:[],
        }
    },
    mounted(){
        let _this = this;
        window.addEventListener("resize",()=>{
            _this.myChart.resize()
        })
        this.getApiBar()
    },
    methods:{
        //柱状图
        getApiBar(){
            let search = {
                start_time:'',
                end_time:''
            }
            search.start_time = this.searchForm.start_time
            search.end_time = this.searchForm.end_time
            api
                .getApiBar(search)
                .then(res => {
                    this.barX1 = []
                    this.barY1 = []
                    if(res.data.code === 1){
                        // console.log(res.data.data)
                        this.barData = res.data
                        this.barX1 = res.data.data.xAxis
                        this.barY1 = res.data.data.yAxis
                        this.getBar1()
                    }
                }).catch(err => {
                    console.log(err);
                });
        },
        //柱状图
        getBar1(){
            this.myChart = echarts.init(document.getElementById('bar1'))
            let unit = this.barData.data.title
            this.myChart.setOption({
                    title: {
                          text: this.barData.data.title,
                          left: "center",
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        top: "16%",
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {   
                            type: 'shadow'
                        },
                        formatter: function(params, ticket, callback) {
                            var res = params[0].name
                            return res +'时,' + unit+':' + params[0].value + '%'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name:this.barData.data.xUnit,
                        data: this.barX1,
                        axisTick: {show: false},
                    },
                    yAxis: {
                        type: 'value',
                        name:this.barData.data.yUnit,
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['#f0f0f0'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {show: false},
                    },
                    series: [{
                        data: this.barY1,
                        type: this.barData.data.type,
                        width:3,
                        itemStyle:
                        {
                            width:3,
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(139, 152, 233,1)'
                                }])
                    }]     
                
            })
            //点击事件
            var _this = this
            this.myChart.on('click', function(params) {
                // console.log(params); 
            })
             //阴影点击
            this.myChart.getZr().on('click',params=>{
                var pointInPixel= [params.offsetX, params.offsetY]
                var pointInGrid = this.myChart.convertFromPixel('grid', pointInPixel);
                // console.log(pointInGrid)
                if (this.myChart.containPixel('grid', pointInPixel)) {
                    this.chart_x = this.myChart.getOption().xAxis[0].data[pointInGrid[0]]
                    // console.log(this.chart_x)
                }
            })
        },
    },
}
</script>
<style  scoped>
#bar1{
    width:100%;
    height: 50%;
    float: left;
}

</style>

1、2叠加柱状图
在这里插入图片描述

<template>
    <div id="bar2"></div>
</template>
<script>
import echarts from "echarts";
import api from "../../api/sendRequest";
export default {
    name: "charts",
    data() {
        return {
            barData:{
                "code": 1,                      //状态码
                "msg": "查看成功！",            //状态信息                                   
                "data": {                       //内容
                    "type": "bar",             //类型
                    "title": "cpu使用率",       //标题               
                    "xUnit": "小时",            //x轴单位
                    "yUnit": "%",               //y轴单位
                    "xAxis": ["10","11","12","13","14","15","16","17","18","19","20","21","22","23"],//x轴内容
                    "yAxis": [9.64,6.9,6.76,6.17,5.49,7.42,9.37,8.62,15.99,14.92,8.31,4.36,4.52,4.52]//y轴内容
                }
            },
            myChart:null,
            searchForm:{},
            barX1:[],
            barY1:{},
            barY2:{}
        }
    },
    mounted(){
        let _this = this;
        window.addEventListener("resize",()=>{
            _this.myChart.resize()
        })
        this.getApiBar()
    },
    methods:{
        //柱状图
        getApiBar(){
            let search = {
                start_time:'',
                end_time:''
            }
            search.start_time = this.searchForm.start_time
            search.end_time = this.searchForm.end_time
            api
                .getApiBarMore(search)
                .then(res => {
                    this.barX1 = []
                    if(res.data.code === 1){
                        // console.log(res.data.data)
                        this.barData = res.data
                        this.barX1 = res.data.data.xAxis
                        this.barY1 = res.data.data.yAxis[0]
                        this.barY2 = res.data.data.yAxis[1]
                        this.getbar2()
                    }
                }).catch(err => {
                    console.log(err);
                });
        },
        //柱状图
        getbar2(){
            this.myChart3 = echarts.init(document.getElementById('bar2'))
            let unit = this.barData.data.title
            this.myChart3.setOption({
                    title: {
                        text: this.barData.data.title,
                        left: "center",
                    },
                    grid: {
                        left: "3%",
                        right: "12%",
                        bottom: "3%",
                        top: "16%",
                        containLabel: true
                    },
                    legend: {
                        data: [],
                        x: "200px", // 对齐方式
                        itemGap: 200 // item之间的距离
                    },
                    xAxis: {
                        axisTick: {show: false},
                        name:this.barData.data.xUnit,
                        type: "category",
                        data: this.barX1,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            // nterval: 0,
                            // rotate: 40
                        }
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        }
                    },
                    yAxis: {
                        name:this.barData.data.yUnit,
                        axisTick: {show: false},
                        type: "value",
                        axisLabel: {
                            showMaxLabel: false
                        },
                        splitLine: {
                            show: false,
                            lineStyle:{
                            color:"#F2F2F2",
                            }
                        }
                    },
                    series: [
                    {
                        data: this.barY1.count,
                        type: this.barData.data.type,
                        name: this.barY1.projectName,
                        itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color:"#8D95EC"
                            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [//渐变色
                            // {
                            //     offset: 0,
                            //     color: "#8D95EC"
                            // },
                            // {
                            //     offset: 1,
                            //     color: "#0844E4"
                            // }
                            // ])
                        }
                        }
                    },
                    {
                        // 背景色
                        type: "pictorialBar",
                        stack: "",
                        name: this.barY2.projectName,
                        symbol: "fixed",
                        z: -50,
                        data: this.barY2.count,
                        itemStyle: {
                        normal: {
                            color: "#92C8F3"
                        }
                        }
                    }
                    ]
                })
            //点击事件
            var _this = this
            this.myChart3.on('click', function(params) {
                // console.log(params); 
            })
             //阴影点击
            this.myChart3.getZr().on('click',params=>{
                var pointInPixel= [params.offsetX, params.offsetY]
                var pointInGrid = this.myChart3.convertFromPixel('grid', pointInPixel);
                // console.log(pointInGrid)
                if (this.myChart3.containPixel('grid', pointInPixel)) {
                    this.chart_x = this.myChart3.getOption().xAxis[0].data[pointInGrid[0]]
                    // console.log(this.chart_x)
                }
            })
        },
    },
}
</script>
<style  scoped>
#bar2{
    width:50%;
    height: 50%;
    float: left;
}

</style>

1、3 X，Y轴互换柱状图
在这里插入图片描述

<template>
    <div id="bar3"></div>
</template>
<script>
import echarts from "echarts";
import api from "../../api/sendRequest";
export default {
    name: "charts",
    data() {
        return {
            barData:{
                "code": 1,                      //状态码
                "msg": "查看成功！",            //状态信息                                   
                "data": {                       //内容
                    "type": "bar",             //类型
                    "title": "cpu使用率",       //标题               
                    "xUnit": "小时",            //x轴单位
                    "yUnit": "%",               //y轴单位
                    "xAxis": ["10","11","12","13","14","15","16","17","18","19","20","21","22","23"],//x轴内容
                    "yAxis": [9.64,6.9,6.76,6.17,5.49,7.42,9.37,8.62,15.99,14.92,8.31,4.36,4.52,4.52]//y轴内容
                }
            },
            myChart:null,
            searchForm:{},
            barX1:[],
            barY1:[],
        }
    },
    mounted(){
        let _this = this;
        window.addEventListener("resize",()=>{
            _this.myChart.resize()
        })
        this.getApiBar()
    },
    methods:{
        //柱状图
        getApiBar(){
            let search = {
                start_time:'',
                end_time:''
            }
            search.start_time = this.searchForm.start_time
            search.end_time = this.searchForm.end_time
            api
                .getApiBar(search)
                .then(res => {
                    this.barX1 = []
                    this.barY1 = []
                    if(res.data.code === 1){
                        // console.log(res.data.data)
                        this.barData = res.data
                        this.barX1 = res.data.data.xAxis
                        this.barY1 = res.data.data.yAxis
                        this.getbar3()
                    }
                }).catch(err => {
                    console.log(err);
                });
        },
        //柱状图
        getbar3(){
            this.myChart3 = echarts.init(document.getElementById('bar3'))
            let unit = this.barData.data.title
            this.myChart3.setOption({
                    title: {
                          text: this.barData.data.title,
                          left: "center",
                    },
                    grid: {
                        left: "3%",
                        right: "12%",
                        bottom: "3%",
                        top: "16%",
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {   
                            type: 'shadow'
                        },
                        formatter: function(params, ticket, callback) {
                            var res = params[0].name
                            return res +'时,' + unit+':' + params[0].value + '%'
                        }
                    },
                    xAxis: {
                        type: 'value',
                        name:this.barData.data.yUnit,
                        data: this.barY1,
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['#f0f0f0'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {show: false},
                    },
                    yAxis: {
                        name:this.barData.data.xUnit,
                        type: 'category',
                        data: this.barX1,
                        axisTick: {show: false},
                    },
                    series: [{
                        data: this.barY1,
                        type: this.barData.data.type,
                        width:3,
                        itemStyle:
                        {
                            width:3,
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(139, 152, 233,1)'
                                }])
                    }]     
                
            })
            //点击事件
            var _this = this
            this.myChart3.on('click', function(params) {
                // console.log(params); 
            })
             //阴影点击
            this.myChart3.getZr().on('click',params=>{
                var pointInPixel= [params.offsetX, params.offsetY]
                var pointInGrid = this.myChart3.convertFromPixel('grid', pointInPixel);
                // console.log(pointInGrid)
                if (this.myChart3.containPixel('grid', pointInPixel)) {
                    this.chart_x = this.myChart3.getOption().xAxis[0].data[pointInGrid[0]]
                    // console.log(this.chart_x)
                }
            })
        },
    },
}
</script>
<style  scoped>
#bar3{
    width:50%;
    height: 50%;
    float: left;
}

</style>

2、折线图，渐变色折线图
在这里插入图片描述

<template>
    <div id="line3"></div>
</template>
<script>
import echarts from "echarts";
import api from "../../api/sendRequest";
export default {
    name: "charts",
    data() {
        return {
            lineData:{
                "code": 1,                      //状态码
                "msg": "查看成功！",            //状态信息                                   
                "data": {                       //内容
                    "type": "line",             //类型
                    "title": "cpu使用率",       //标题               
                    "xUnit": "小时",            //x轴单位
                    "yUnit": "%",               //y轴单位
                    "xAxis": ["10","11","12","13","14","15","16","17","18","19","20","21","22","23"],//x轴内容
                    "yAxis": [9.64,6.9,6.76,6.17,5.49,7.42,9.37,8.62,15.99,14.92,8.31,4.36,4.52,4.52]//y轴内容
                }
            },
            myChart:null,
            searchForm:{},
            lineX1:[],
            lineY1:{},
            lineY2:{},
            lineY3:{},
            legendList:[]
        }
    },
    mounted(){
        let _this = this;
        window.addEventListener("resize",()=>{
            _this.myChart.resize()
        })
        this.getApiLine()
    },
    methods:{
        //折线图
        getApiLine(){
            let search = {
                start_time:'',
                end_time:''
            }
            search.start_time = this.searchForm.start_time
            search.end_time = this.searchForm.end_time
            api
                .getApiLineMore(search)
                .then(res => {
                    this.lineX1 = []
                    if(res.data.code === 1){
                        // console.log(res.data.data)
                        this.lineData = res.data
                        this.lineX1 = res.data.data.xAxis
                        this.lineY1 = res.data.data.yAxis[0]
                        this.lineY2 = res.data.data.yAxis[1]
                        this.lineY3 = res.data.data.yAxis[2]
                        this.legendList = []
                        this.legendList.push(this.lineY1.projectName)
                        this.legendList.push(this.lineY2.projectName)
                        this.legendList.push(this.lineY3.projectName)
                        this.getLine()
                    }
                }).catch(err => {
                    console.log(err);
                });
        },
        //折线图
        getLine(){
            this.myChart = echarts.init(document.getElementById('line3'))
            let unit = this.lineData.data.title
            this.myChart.setOption({
                    title: {
                        text: this.lineData.data.title,
                        left: "center",
                        subtext:'最近15日，门宽监测最低100.00cm，最高100.00cm，最大偏差0.00cm，平均与基准偏差20.00cm',
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "10%",
                        top: "20%",
                        containLabel: true
                    },
                    legend: {
                        show: true,
                        data: this.legendList,
                        left: "right",
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {   
                            type: 'cross'
                        },
                        // formatter: function(params, ticket, callback) {
                        //     var res = params[0].name
                        //     return res +'时,' + unit+':' + params[0].value + '%'
                        // }
                    },
                    xAxis: {
                        type: 'category',
                        name:this.lineData.data.xUnit,
                        data: this.lineX1,
                        axisTick: {show: false},
                    },
                    yAxis: [
                        {
                            splitLine: { show: false },
                            axisTick: {show: false},
                            name: "楼高(层)",
                            type: "value",
                            position: "left",
                            axisLabel: {
                            formatter: "{value}"
                            },
                        },
                        {
                            splitLine: { show: false },
                            axisTick: {show: false},
                            name: "速度(m/s)",
                            nameLocation: "end",
                            min: 0,
                            max: 5,
                            type: "value",
                            position: "right",
                            axisLabel: {
                            formatter: "{value}"
                            },
                        }
                    ],
                    series: [
                        {
                            data: this.lineY1.count,
                            name:this.lineY1.projectName,
                            type: this.lineData.data.type,
                            width:3,
                            smooth: true,
                            symbolSize:10,
                            lineStyle:{
                                    width:2
                                },
                            itemStyle: {
                                color: 'rgba(139, 152, 233,100)',
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(139, 152, 233,100)'
                            }, {
                                offset: 1,
                                color: 'rgba(255,255, 255,0)'
                            }])
                            },
                        },
                        {
                            name:this.lineY2.projectName,
                            type: this.lineData.data.type,
                            width:3,
                            smooth: true,
                            symbolSize:10,
                            lineStyle:{
                                    width:2
                                },
                            itemStyle: {
                                color: 'rgb(146, 201, 241)',
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(146, 201, 241)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255,255, 255,0)'
                                }])
                            },
                            markLine: {
                                symbol: "circle",
                                label: {
                                    formatter: "额定最大速度：{c}",
                                    position: "middle" //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                                },
                                lineStyle: {
                                    width:3,
                                    // normal: {
                                    //   color: "#00BFFF",
                                    //   type: "dashed"
                                    // }
                                },
                                data: [{ 
                                    yAxis: ['2','2','2','2','2','2','2','2','2','2'],
                                    }]
                            },
                            data: this.lineY2.count,
                        },
                        {
                            name: this.lineY3.projectName,
                            type: "bar",
                            barGap: "-100%",
                            // barWidth: 20,
                            label: {
                                normal: {
                                    color: "#EEEEEE"
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: "rgba(255, 255, 255, .1)",
                                    borderWidth: "10",
                                    barBorderRadius: 0,
                                    color: "rgba(220, 220, 220, 0.3)"
                                },
                            },
                            z: -12,
                            data: this.lineY3.count,
                        },
                    ]     
                
            })
            //点击事件
            var _this = this
            this.myChart.on('click', function(params) {
                // console.log(params); 
            })
        },
    },
}
</script>
<style  scoped>
#line3{
    width:100%;
    height: 50%;
    float: left;
}

</style>

3、饼图–内外圈带阴影
在这里插入图片描述

<template>
    <div id="pie1"></div>
</template>
<script>
import echarts from "echarts";
import api from "../../api/sendRequest";
export default {
    name: "charts",
    data() {
        return {
            pieData:{
                "code": 1,                   //状态码
                "msg": "查询成功！",          //状态信息
                "data":  {                   //内容
                    "type": "pie",           //图形类别
                    "title": "饼图",         //标题
                    "legend":["坤和求是里11栋","坤和求是里18栋","嘉里云荷廷12栋","嘉里云荷廷8栋","新昌人民医院"],//图例
                    "result_list": [         //列表内容
                        {"name": "坤和求是里11栋","value": 26},
                        {"name": "坤和求是里18栋","value": 23},
                        {"name": "嘉里云荷廷12栋","value": 21},
                        {"name": "嘉里云荷廷8栋","value": 21},
                        {"name": "新昌人民医院","value": 16}
                    ]
                }
            },
            myChart:null,
            searchForm:{},
            pieList:[],
            title:[],
        }
    },
    mounted(){
        let _this = this;
        window.addEventListener("resize",()=>{
            _this.myChart.resize()
        })
        this.getPie()
    },
    methods:{
        // 饼图
        getPie(){
            let search = {
                start_time:'',
                end_time:'',
                limit:'5'
            }
            search.start_time = this.searchForm.start_time
            search.end_time = this.searchForm.end_time
            api
                .getTopElevator(search)
                .then(res => {
                if(res.data.code === 1){
                    this.pieList = []
                    this.title = []
                    this.pieData = res.data
                    res.data.data.result_list.forEach((item) => {
                        this.pieList.push({value:item.count,name:item.name,id:item.device_id})
                        this.title.push(item.name)
                    })
                    this.getpie1()
                }
                }).catch(err => {
                    console.log(err);
                });
        },
        // 饼图
        getpie1(){
            this.myChart = echarts.init(document.getElementById('pie1'))
            this.myChart.setOption({
                    title : {
                        text: '五项目饼图',
                        x:'left'
                    },
                    tooltip : {
                        // trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                        itemWidth: 10,  // 设置宽度
                        itemHeight: 10, // 设置高度
                        itemGap: 20, // 设置间距
                        data:  this.title,
                    },
                    series : [
                        {
                            name:'',
                            type: this.pieData.data.type,
                            radius : ['35%', '60%'],
                            center: ['50%', '40%'],
                            label: {
                                normal: {
                                        show: false,
                                        // position: 'outer',
                                        // formatter: '{d}%'
                                    }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.pieList,
                            itemStyle: {
                                color:function(params) {
                                var colorList = [
                                        '#92C8F3','#5865F0','#C18FF5','#FCAA95','#8D95EC'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        // 外边框的设置
                        {
                            radius : ['60%', '65%'],
                            center: ['50%', '40%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: this.pieList,
                            itemStyle: {
                            color:function(params) {
                                var colorList = [
                                        '#F4F9FE','#EEF0FE','#F9F4FE','#FFF7F4','#F4F4FD'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        // 内边框的设置
                        {
                            radius : ['30%', '35%'],
                            center: ['50%', '40%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: this.pieList,
                            itemStyle: {
                            color:function(params) {
                                var colorList = [
                                        '#F4F9FE','#EEF0FE','#F9F4FE','#FFF7F4','#F4F4FD'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    ]
            })
            //点击事件
            var _this = this
            this.myChart.on('click', function(params) {
                var id = params.data.id;
                // console.log(id); 
                _this.$router.push({ path: '/LeftListTab', query: {device_id:id}})
            })
        },
    },
}
</script>
<style  scoped>
#pie1{
    float: left;
    width:50%;
    height: 100%;
}
#pie1{
    float: left;
    width:50%;
    height: 100%;
}

</style>
fetten1992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java/php/net/python个人博客系统设计
计算机软件设计
08-05 786
本系统带文档lw万字以上+答辩PPT+查重 如果这个题目不合适，可以去我上传的资源里面找题目，找不到的话，评论留下题目，或者站内私信我， 有时间看到机会给您发 1、关于个人博客系统的基本要求 （1）功能要求：首页、个人中心，博主信息管理，旧时光管理，回忆管理，主题管理，生活管理，系统管理，管理员管理等功能模块。 （2）性能：在不同操作系统上均能无差错实现在不同类型的用户登入相应界面后能不出差错、方便地进行预期操作。 （3）安全与保密要求：用户都必须通过管理员审核才能进入系统。 （4）环境要求：支持Win
柱状图多维条形图vue_vue-vant-echart
weixin_39723102的博客
12-18 527
// 引入基本模板let echarts = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/line')require('echarts/lib/chart/bar')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts...
iOS 绘制不规则图形，并且添加点击事件 的两种方法
04-27
iOS 绘制不规则图形，并且添加点击事件 的两种方法
画饼图
VAN_MR的博客
11-27 473
#import "BinTu.h" @implementation BinTu - (void)drawRect:(CGRect)rect {         NSArray *array = @[@25,@25,@50];     for (NSNumber *num in array) {          [self dr
网页柱形图表
末安的博客
10-19 934
欢迎收看《好看的博客没人赞》系列 这篇博客将为各位看官做一个柱形图表的样式。 首先展示一波效果图提高一下大家的兴趣： 这里没有使用其他jar包，而是采用css画出来的，也就是说，这里是采用定位的方式制作图表。 咋们分析一波柱形图是怎样组成的：如上图，左侧为ul竖版样式，下方为ul横版样式，图中的虚线格子是由6个div拼凑而成的，由上往下前5个div属性是：边框虚线，大小一致，下边框隐藏；最下面的div属性：只显示上边框，长铺满，边框虚线；再到图中的柱子，也是由5个div定位而成，长一致，高为0.
Echarts bar 柱状图超详细实战
时光足迹
08-26 1万+
在最近的项目中，有可视化图表的需求，第一时间就想到了Echarts和Hightcharts。 要用到的可视化图表都是比较常见的，Echarts文档和实例都比较全面，而且还是中文的，方便阅读，于是选择了Echarts。 Echarts的图表样式如果是自用，肯定是没啥问题的，但是 UI 肯定是不满意的，于是进行了一系列的样式调整… 安装及配置 前端框架为easywebpack-vue，使用的Echarts版本为^5.0.1 Echarts 官方文档: https://echarts.apache.org/zh/
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制折线图、柱状图、饼状图组合图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载...
柱状图、折线图、饼图demo、
08-04
基于dx14.1的柱状图、折线图、饼图demo，适合新手参考，
柱状图、折线图、饼图、蜘蛛图完整demo
12-25
highcharts 柱状图、折线图、饼图、蜘蛛图完整demo 更多实例请查看http://www.hcharts.cn/
unity可视化图表插件XCharts绘制折线图、饼图、柱状图 XCharts-Demo 项目demo 亲测好用
02-23
支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表。 特性： 内置丰富示例和模板，参数可视化配置，效果实时预览，纯代码绘制。 支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表。 支持直线...
vue2.0 自定义 饼状图 (Echarts)组件的方法
12-28
1、自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 --> <div id=myChart xss=removed></div> </div> </template> [removed] export default { props: { // 样式 echartStyle: { type: Object, default(){ return {} } }, // 标题文本 titleText: { type: St
iOS数据统计（柱状图、折线图、扇形图）
fuzheng的博客
11-23 5541
大数据（big data），指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。 大数据技术的战略意义不在于掌握庞大的数据信息，而在于对这些含有意义的数据进行专业化处理。换而言之，如果把大数据比作一种产业，那么这种产业实现盈利的关键，在于提高对数据的“加工能力”，通过“加工”实现数
vue图表之折柱图(柱状图和折线图)，包含点击事件
Bright2017的博客
11-05 2232
效果图 柱状图和折线图，主要是以柱状图为底，在柱状图的基础上加入了折线图 可自定义的参数： series：数据的数量 type 图表的类型 bar柱状图 line折线 数据有几个，界面展示几个 xAxis：X轴数据 unit：顶部单位 barWidth：柱子的宽度 colorLine：柱子和折线的颜色 backLine：Y轴背景线条颜色 dataZoomNum：大于这个数量，横向滚动条出现 legendBottom：legend距离底部的位置 完整代码...
Echarts3里的地图标记点事件效果实现
热门推荐
garson328的博客
02-16 2万+
echarts官方api：http://echarts.baidu.com/index.html
Echarts pictorialBar图
guohangfei001的博客
07-11 1万+
1.最终结果2.Echart API 地址：http://echarts.baidu.com/option.html3.代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible&
Bar-1-柱形图的颜色根据预警值渐进变化
LzzMandy的博客
05-02 1293
1、示例图 2、源码 var warningcolorValue=400;//根据预警值变化柱子的颜色，值设置 option = { tooltip: { trigger: 'axis', formatter: '{b}：{c}人',//悬停显示数据单位 backgroundColor:'gray', ...
echarts象形柱图 pictorialBar
zm_miner的博客
05-05 1万+
项目需求 这种属于series-> type的类型是pictorialBar 很多怪形的柱形图都是使用它, 只需要修改series -> symbol的值就可以, 在这里他的类型值是'react' 我建议可以复制我这段代码 自己跑一下 <!DOCTYPE html> <html lang="en"> <head> <meta char...
echarts折线图和饼图常用的一些api
夏微微的博客
12-15 725
一、折线图 改变x轴的字体颜色和大小 xAxis: { type: 'category', boundaryGap: false, data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10','11','12','13','14','15','16','17','18','
运用googleapi做图（折线图 饼图）
annuoa的专栏
11-22 1029
google.load('visualization', '1', {'packages':['annotatedtimeline','corechart']});       google.setOnLoadCallback(drawChart);        function drawChart() {        //开始画总TimeLine   var data = new
使用JFreeChart-创建折线图的小结（之CreateLineChart）
最新发布
05-30
JFreeChart是一款开源的Java图表库，它可以创建各种类型的图表，包括折线图、柱状图、饼图等等。下面是使用JFreeChart创建折线图的小结，包括CreateLineChart方法的使用。 1. 导入依赖 ``` <groupId>org.jfree ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值