python使用echarts做数据可视化--彩色的柱形图

这里使用的python的django框架

调用echarts库

定义个div用于一会放置图标

 <script type="text/javascript">

    var list = {{ data1| safe }};
    var xAxisList = [];
    var yAxisList = [];
    for (let item of list){
        xAxisList.push(item.fields.type);
        yAxisList.push(item.fields.freq);
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
    var option = {
        color: function (params) {
            var colorList = ['#BA55D3', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2', '#8A2BE2']; //每根柱子的颜色
            return colorList[params.dataIndex];
        },
        tooltip: {},  <!-- 鼠标放上去会显示数据 -->
        title: {
            text: '最受欢迎的属性'
        },
        legend: {
            data: ['dulaoc']
        },
        xAxis: {

            name: '属性',
            data: xAxisList
        },
        yAxis: {
            name: '数量',
            type: 'value'
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: yAxisList
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

var list = {{ data1| safe }};
var xAxisList = [];
var yAxisList = [];
for (let item of list){
xAxisList.push(item.fields.type);
yAxisList.push(item.fields.freq);
}
用于接收后台的数据

如果只是要例子可以去掉

在这里添加一些伪数据data:[a,b,c,d,e] data :[1,2,3,4,5]